Equal Height Columns with jQuery

Published December 7, 2008 by Rob Glazebrook.

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!

224 Responses

  1. brass cleaner ketchup (reply)

    When I originally commented I clicked the “Notify me when new comments are added” checkbox and now each
    time a comment is added I get several e-mails with the same comment.

    Is there any way you can remove people from that service?
    Cheers!

  2. Darwin (reply)

    That is really fascinating, You’re an overly
    professional blogger. I have joined your rss feed and look ahead to looking for extra of your great
    post. Additionally, I’ve shared your site in my social networks

  3. The best car Polish (reply)

    After exploring a number of the articles on your web page, I seriously appreciate your way
    of writing a blog. I saved as a favorite it to my bookmark webpage list and will be checking back
    soon. Please check out my web site too and tell me how you feel.

  4. 16gb Micro sd card class 10 (reply)

    Hey! I know this is kinda off topic nevertheless I’d figured
    I’d ask. Would you be interested in exchanging links or maybe guest writing a blog post or
    vice-versa? My blog discusses a lot of the same topics as yours and I feel
    we could greatly benefit from each other. If you’re interested
    feel free to shoot me an e-mail. I look forward to hearing from you!
    Awesome blog by the way!

  5. Xiomara (reply)

    Everything is very open with a really clear description of the issues.
    It was really informative. Your website is very useful.
    Thank you for sharing!

  6. youtube.com (reply)

    Greate post. Keep writing such kind of information on your site.
    Im really impressed by it.
    Hello there, You’ve done an incredible job. I’ll definitely digg it and individually suggest to my friends.
    I am confident they’ll be benefited from this site.

  7. canon camera batteries uk (reply)

    Magnificent goods from you, man. I have consider your stuff prior to and
    you are just extremely great. I really like
    what you have got here, really like what you are stating and the way in which through which you are
    saying it. You’re making it enjoyable and you still take care of to stay it sensible.
    I cant wait to learn much more from you. That is really a tremendous
    site.

  8. microwave convection oven combo over range (reply)

    An impressive share! I’ve just forwarded this onto a coworker who had been doing a little homework on this.
    And he in fact ordered me dinner simply because I found it for him…
    lol. So let me reword this…. Thank YOU for the meal!! But yeah, thanx
    for spending some time to discuss this topic here
    on your website.

  9. Tatiana (reply)

    You actually make it seem really easy with your presentation however I to
    find this topic to be actually one thing which I feel I might by no means understand.

    It kind of feels too complicated and extremely broad for me.
    I’m looking ahead to your subsequent publish, I will
    attempt to get the dangle of it!

  10. Class 10 Sd Card Speed (reply)

    Appreciating the commitment you put into your site and
    in depth information you present. It’s awesome to come across a
    blog every once in a while that isn’t the same outdated rehashed material.
    Fantastic read! I’ve saved your site and I’m adding your RSS
    feeds to my Google account.

  11. micro sd card class class 10 vs class 4 micro sd Card (reply)

    Excellent site you have here but I was curious if you knew of any user discussion forums
    that cover the same topics talked about here?
    I’d really love to be a part of online community where I can get suggestions from
    other knowledgeable people that share the same interest.
    If you have any suggestions, please let me know. Many thanks!

  12. James Threadgill (reply)

    I had an issue with the content being cut off at the bottom by web-kit browsers. Changing the call from document ready to window load resolved it. It works great!

    jQuery(window).load(function(){

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>