Vertically aligning floated DIVs with varying heights?

Question

See my JSfiddle to see what currently happens

I have some divs with content of varying height. The width is always the same.

Each row should contain two columns, but I would like the start of each div in a row to be at the same height. Contrast this to say the jQuery Masonry plugin, where all the "bricks" are squeezed together to remove spaces.

What's a good, cross-browser way to achieve this? My idea was to clear the float for every 2nd nth child, but I believe IE doesn't support this?

I believe I could also do something with jQuery, but is it tidy? Will I have learnt anything in order to fix it next time the problem occurs?

HTML:

<div id="a" class="box">        Some content<br />Div A</div>
<div id="b" class="box">        Some content<br />Div B</div>
<div id="c" class="box">        Some content<br />Div C</div>
<div id="d" class="box">        Some content<br />Div D</div>
<div id="e" class="box">        Some content<br />Div E</div>
<div id="f" class="box">        Some content<br />Div F</div>

CSS:

.wrapper { width: 444px; }
.box {
    width: 200px;
    border: 1px solid #333;
    float: left;
    margin: 0 10px;
    }
#a { height: 200px; }
#b { height: 180px; }
#c { height: 100px; }
#d { height: 80px; }
#e { height: 50px; }
#f { height: 50px; }

Answer 1

Is this what you had in mind? It does use jQuery and adds a bit of extra markup - not sure if that's acceptable.

http://jsfiddle.net/Awg3u/7/

I've only tested in Chrome/FF so far, and haven't checked in IE yet.

Answer 2

You can use display:inline-block

http://jsfiddle.net/Awg3u/1/

Answer 3

You basically want to find the maximum height for each box and then take the largest and set every other box to that height.

There should be any number of jQuery plugins that can do this or you can roll your own

Answer 4

Not sure if I understand what you want correctly.

If not correct me please.

If you want the all the first divs of the rows to have the same height (based on the first div) you could do something like:

(function() {
    var first = true;
    var height = 0;
    var pos;
    $('.box').each(function() {
        if (first) { // do we have the first div?
            height = $(this).height(); // set height and pos from left of first div to be used by other divs
            pos = $(this).position();
        }
        first = false;

        var current_pos = $(this).position();
        if (current_pos.left == pos.left) { // are we the first div in a row, e.g. the most left div?
            $(this).height(height); // set height to match the first div
        }
    });
})(jQuery);

http://jsfiddle.net/Awg3u/3/

Answer 5

You can add clearing div after every 2 blocks as follows:

<div class="box"></div>
<div class="box"></div>
<div class="clear"></div>
<div class="box"></div>
<div class="box"></div>
<div..................>

Or you can wrap your rows in a new DIV.

<div>
<div class="box"></div>
<div class="box"></div>
</div>
<div>
<div class="box"></div>
<div class="box"></div>
</div>
.......etc.