How do I keep multiple DIVs the same height using jQuery?

Question

I've got a few DIV tags with different amounts of text content.

HTML:

<div id="boxes">
    <div id="boxone">
        <p>...</p>
    </div>
    <div id="boxtwo">
        <p>...</p>
    </div>
    <div id="boxthree">
        <p>...</p>
    </div>
    <div id="boxfour">
        <p>...</p>
    </div>
</div>

They're in a two-by-two layout and their width is fluid:

CSS:

div#boxes {
    width: 100%;
}

div#boxes div {
    width: 49.9%;
    float: left;
}

I want them all the same height.

So, I loop through them and find the height of the tallest one. Then I loop again and set them all to that height.

jQuery:

$(function() {
    var maxHeight = 0;
    $('div#boxes div').each(function(){
        if (maxHeight < $(this).height()) {maxHeight = $(this).height()}
    });
    $('div#boxes div').each(function(){
        $(this).height(maxHeight);
    });
});

This works well if the height of the div doesn't need to change again.

But, it fails if I resize the browser window:

1. If I (a) make the browser wider, then (b) my DIVs get wider, then (c) their text content wraps fewer times, and then (d) my DIVs are too tall.

2. If I (b) make the browser more narrow, then (b) my DIVs get narrower, then (c) their text content wraps more, and then (d) my DIVs are too short.

How do I both (1) automatically size DIVs to the height of their content like normal, but also (2) keep those multiple DIVs the same height?

Answer 1

It's been a while since I've done any real CSS, but from memory you've run into one of its limitations. It's not as straightforward as you'd imagine to create equal height columns.

Have a look at the following explanation, and examples of some hacks you can apply to solve it:

http://www.ejeliot.com/blog/61

You'll find a plethora of other information on this if you google "equal height columns css".

Answer 2

Check out this jQuery Plugin which allows you to monitor a CSS property such as the height.

Answer 3

Update... completely rewriting this answer after experimenting and finding another, apparently workable way to do this:

function sortNumber(a,b)    {
    return a - b;
}

function maxHeight() {
    var heights = new Array();
    $('div#boxes div').each(function(){
        $(this).css('height', 'auto');
        heights.push($(this).height());
        heights = heights.sort(sortNumber).reverse();
        $(this).css('height', heights[0]);
    });        
}

$(document).ready(function() {
    maxHeight();
})

$(window).resize(maxHeight);

One thing I noticed is that IE really has rounding troubles with 50% wide floated divs... the rendering was much better if I changed those to 49%.

This jQuery works...

// global variables

doAdjust = true;
previousWidth = 0;

// raise doAdjust flag every time the window width changes

$(window).resize(function() {
 var currentWidth = $(window).width();
 if (previousWidth != currentWidth) {
  doAdjust = true;
 }
 previousWidth = currentWidth;
})

// every half second

$(function() {
 setInterval('maybeAdjust()', 500);
});

// check the doAdjust flag

function maybeAdjust() {
 if (doAdjust) {
  adjustBoxHeights();
  doAdjust = false;
 }
}

// loop through the DIVs and find the height of the tallest one
// then loop again and set them all to that height

function adjustBoxHeights() {
 var maxHeight = 0;
 $('div#boxes div').each(function(){
  $(this).height('auto');
  if (maxHeight < $(this).height()) {maxHeight = $(this).height()}
 });
 $('div#boxes div').each(function(){
  $(this).height(maxHeight);
 });
}