Question

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:

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:

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

Answer 1

I don’t know of any way to do this in CSS. The jQuery Masonry plugin should give you the ability to do this if you’re not opposed to using JavaScript.