Align div depends on the space avaialble

Question

I have the div alignment as show below. I don't need the formal table-like layout. I need DIV5 to use the space below DIV2 (marked in red). I'm using Bootstrap framework and I need a generic solution so that whereever I use that, the div elements will be align appropriately.

Kindly help. Thanks in advance.

Answer 1

Twitter bootstrap's grid system isn't fluid, cascading or whatever you want to call it. I assume you have there two '.row' divs with columns and those accept only 12 columns on a row and that's it - rows won't overlap.

You should try using something like Masonry (http://masonry.desandro.com/), with or without bootstrap. With bootstrap you could create the Masonry grid inside of row > col-lg-12 like this

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            Masonry grid plugin here.
        </div>
    </div>
</div>