Equal Height Columns with jQuery

Update: This concept has been adapted into a full-fledged jQuery plugin. Check it out here. And then read on to learn how this technique is done.

Creating equal-height columns with CSS is sometimes a bear. But who needs the hassle of faux columns, “clear” divs and the rest? With this bit of jQuery, you can easily equalize the heights of any group of elements.

This technique was born of frustration. I ran into two layout problems while working on the redesign of CSS Newbie one afternoon, and both were directly related to the varying heights of elements.

The first problem was in the footer. If you look closely, you’ll see that there is a nice subtle two-tone border in between each of the columns in the footer.

That style wasn’t as easy to create as it might look. At first, I was going to make the border part of the background image, and just edit my content to suit. But that’s very un-web of me: the beauty of the web is we’re not constrained by sizes nearly as much as print designers.

So instead, I decided to make the borders the old-fashioned way, as legitimate CSS borders. Of course, to get it exactly the way I wanted I had to resort to a bit of a hack, matching light borders on the right side of one column with a dark border on the left side of the following column. The hack works beautifully… as long as all three of my columns are of equal height. Otherwise, the borders don’t match:

The second problem I ran into was in the “recent articles” section of the homepage. I wanted to feature four articles, but I didn’t want them to take up a ton of space. To accomplish that, I made the article blocks half as wide as my space and floated them into two columns with two rows.

And as long as I’m lucky and all my excerpts are the same length, that works fine. But the instant something is a line or two longer or shorter, one of the more annoying flaws with floats rears its ugly head. If I have a long excerpt in spot 1, followed by a short excerpt in spot 2, the excerpt in spot 3 won’t float all the way to the left: it’ll get caught on the edge of the first excerpt instead.

So again, I have a height-related problem. “If only there was an easy way to equalize heights without resorting to a table,” I thought thusly.

And so I set out to find an easy way. And after a bit of fiddling with jQuery, I was able to find a workable solution. Here’s the function I ended up with:

function equalHeight(group) {
	var tallest = 0;
	group.each(function() {
		var thisHeight = $(this).height();
		if(thisHeight > tallest) {
			tallest = thisHeight;
		}
	});
	group.height(tallest);
}

You can see it in action here. What this function is doing is:

1. Sets a variable, “tallest,” to zero.
2. Loops through each of the items in the group we’ve defined.
3. If the current item is taller then the previous “tallest” item, it becomes the new tallest item.
4. Once we’ve looked at all the items, they all get their height reset to be the same as the tallest of the group.

So in order to equalize the heights of both my footer columns and my recent articles, all I needed to do was something like this:

$(document).ready(function() {
	equalHeight($(".recent-article"));
	equalHeight($(".footer-col"));
});

Which just waits until all my elements are done loading (so that the heights can be computed accurately), then sets both the heights.

That’s all there is to it! This function is good for fixing wily floats without clears, creating nice equal-height column designs without needing faux columns, and probably half a dozen things I haven’t thought of yet. I’m sure you’ll be able to find a use for the script someday… after all, I managed to find two uses in a single afternoon!