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

add float:right to the third block

<div style="width: 606px;">
    <div class="block">
    </div>
    <div class="block">
    </div>
    <div class="block" style="height: 250px;float:right;">
    </div>
    <div class="block">
    </div>
    <div class="block">
    </div>
    <div class="block">
    </div>
</div>

Answer 2

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/

Answer 3

Simple answer, NO.

(sorry)

This cannot be accomplished in vanilla HTML or CSS alone, you will need to look into a JavaScript implementation like Isotope or Masonry, or one of your own making.