CODEWITHSUNDEEP
jquerycsstwitter-bootstraphtml
Raja Asthana
Raja Asthana

Reputation: 2100

Align div depends on the space avaialble

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.

enter image description here

Kindly help. Thanks in advance.

Upvotes: 3

Views: 234

Answers (2)

Arun G
Arun G

Reputation: 1688

I faced similar kind of issue. Mosaic Flow came up handy and can be included in simple steps.

http://jquery-plugins.net/mosaic-flow-pinterest-like-responsive-image-grid

<div class="mosaicflow__item"> ....just include all <img> inside this DIV
</div> ....include the plugin <script src="../lib/mosaicflow/jquery.mosaicflow.min.js"></script>

Upvotes: 0

mMoovs
mMoovs

Reputation: 934

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>

Upvotes: 1

Related Questions