CSS keep elements maximum top and left

Question

I am trying to make a website with PHP.

<span style="height:60px;"></span>
<span style="height:90px;"></span>
<span style="height:95px;"></span>
<span style="height:45px;"></span>
<span style="height:60px;"></span>
<span style="height:70px;"></span>
<span style="height:55px;"></span>
<span style="height:60px;"></span>
<span style="height:40px;"></span>

The spans above are some posts.
And its CSS is:

span{
    width:150px;
    margin:1px;
    display:inline-block;
    float:left;
    background-color:#000;
}

I got this result: http://jsfiddle.net/5kPFJ/3

But I need a result like this: http://jsfiddle.net/56ybX/
I used <div> with some CSS to keep these spans maximum top.
But I need this result without the <div> tag.
What should I do?

Answer 1

you should have some kind of wrapper to hold the column when you float some thing it's display become block so the spans are block now you can't do what you want . you should make 3 column float and inside them put your spans and the container can be any html element you can change the behave of that element with css