make the 2nd line fill up the gaps above

Question

A simple html/css issue. Please look at this example, I would like the blocks in the 2nd line to fill up the gaps above them. Anyway besides using JavaScript?

.b         


        

Answer 1

If you are open to using CSS3, then maybe columns can help you to get the blocks stack up.

Demo: http://jsfiddle.net/abhitalks/bLUrU/5/

Example CSS:

.container {
    -webkit-columns: 3;        /* create three columns */
    -webkit-column-gap: 2px;   /* have 2px gap between the columns */
}
.block {
    width: 200px;
    height: 200px;
    background-color: #ff0000;
    margin: 2px 2px;
    -webkit-column-break-inside: avoid; /* avoid breaking contents across columns */
}

Add other vendor prefixes as required apart from -webkit.

Of course, by using columns you would have to relook the ordering of your divs. Like here: http://jsfiddle.net/abhitalks/bLUrU/6/