How to get items to start top left of grid, and flow right

[CraigLovelock]

Hello. How can i change the flow of the items? I want them to start and the top left and flow right.

The issue i am having is that the items are not being displayed as i would hope.

Lets say the html markup is like this:

<div id="buildcontainer">

    <div class='blogresults'>ITEM 1</div>

    <div class='blogresults'>ITEM 2</div>

    <div class='blogresults'>ITEM 3</div>

    <div class='blogresults'>>ITEM 4</div>

</div>

When checking the source code, that is the mark up. Yet in my website grid the items are displayed such as:

ITEM 3 | ITEM 1 | ITEM 4 | ITEM 2

This wouldnt normally be a problem, except i am ordering the contents depending on their popularity. I could hack it and change the order of the content, but its all dynamically loaded.

Is this a case of my items css styling? Here is the styling for that:

.blogresults { 
border: 0px solid #fff;
background-color: #fff;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
z-index: 500;
disply: inline-block;
float:;
 -webkit-transition: box-shadow 200ms;
 -moz-transition: box-shadow 200ms;
 -o-transition: box-shadow 200ms;
 -ms-transition: box-shadow 200ms;
 transition: box-shadow 200ms;
}

#buildcontainer {
width: 100%;
height: auto;
    margin-top: 5%;
}