Dynamically generated “floating divs” with even width but not even heights, align issue

Question

I will be very appreciative if anyone has a lead how to solve this:

Problem description: we have Dynamically generated “floating divs” with even witdh but not even heights.(content based) . the “Parent container” will have diffrent width parameters to allow 2,3,4 (in attached example 2 columns and 3 )divs to fits it’s width. divs order is left to right, always by hirarchical order 1,2,3 etc...

How can we achieve this without creating gaps? ( casued by traditional floats method).

Number of divs is dynamically created and not limited...

Solution should be ie8,ie9 compatible

thanks, Jonathan. ![enter image description here][1]

example illustration can be found here: https://app.box.com/s/6y89dlan1jt8bpjvcgb9

Answer 1

Have you considered using something like Masonry?

Answer 2

Pure CSS solution - Cross Browser (IE6+)

Use a column layout instead of floating.

This Working Fiddle demonstrate a 3 column layout, but you can easily change it to N column.

For a N Column Layout, you'll need to create N containers, each of 100/N width, and fill them accordingly.

You just have to build your dynamic content in the right order. (put the dynamic div in the right column each time).

Here's the basic HTML & CSS for the 3 column layout

<div class="Container">
</div>
<div class="Container">
</div>
<div class="Container">
</div>

.Container {
    float: left;
    width: 31.33%;
    margin: 1%;
}

The script in the fiddle is for the sole purpose of adding dynamic content. and although the content that I had have a fixed height, it will obviously work with changing heights as well.

BTW: for a 2 column layout, you Don't need this. just make the odd item float left, and the even items float right. Like This