How to arrange wrapped divs to top?
===

In my web application screens I have many areas which has the same width and different heights.
For eg. I have six divs:

        <div style="height: 50px">1</div>
        <div style="height:150px">2</div>
        <div style="height:250px">3</div>
        <div style="height:130px">4</div>
        <div style="height:120px">5</div>
        <div style="height: 30px">6</div>

and the css:

        div{
            border:1px solid red;
            float:left;
            width:100px;
        }

browsers displays it like this:

![enter image description here][1]


If the browser window is changed to smaller width divs are automatically wrapped.
Wrapped divs are aligned according the top div which has maximum height. Needlessly
empty spaces appears on the screen:

![enter image description here][2]

Is there a way to arrange all wrapped divs to top?

![enter image description here][3]


  [1]: http://i.stack.imgur.com/0UQzB.jpg
  [2]: http://i.stack.imgur.com/uLEw6.jpg
  [3]: http://i.stack.imgur.com/5xfGN.jpg