Equal Height Columns with jQuery

Published December 7, 2008 by CSS Newbies.

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;

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() {

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!

257 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?

  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. 16gb micro sd card class 10 samsung (reply)

    My brother suggested I might like this website.
    He was totally right. This post truly made my day.
    You cann’t imagine just how much time I had spent for this information! Thanks!

  4. 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.

  5. countertop convection oven reviews (reply)

    If you are going for finest contents like I do, simply visit this web page
    daily for the reason that it gives feature contents, thanks

  6. youtube.Com (reply)

    Wow! In the end I got a web site from where I be able
    to really take useful facts regarding my study and knowledge.

  7. 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!

  8. 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!

  9. 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.

  10. 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

  11. 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.

  12. 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!

  13. 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.

  14. 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!

  15. beverage refrigerator glass door commercial (reply)

    Hi mates, fastidious post and fastidious arguments commented at this place, I am really enjoying by these.

  16. nexus 10 micro Sd card (reply)

    It’s truly very difficult in this active life to
    listen news on TV, therefore I only use the web for
    that purpose, and take the most up-to-date news.

  17. 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!


  18. kapsul kulit manggis (reply)

    Great post. I was checking constantly this blog and I
    am impressed! Extremely useful information particularly the last part :
    ) I care for such information a lot. I was looking for this certain info for a very long time.
    Thank you and good luck.

  19. obat daun sirsak (reply)

    I’m extremely pleased to uncover this website. I need to to thank you
    for ones time for this particularly wonderful read!!

    I definitely really liked every little bit of it and I have you saved to fav to see
    new stuff on your blog.

  20. http://www.malvinshops.com/ (reply)

    I’m truly enjoying the design and layout of your blog.

    It’s a very easy on the eyes which makes it much more pleasant for me to come here and visit more often. Did you
    hire out a developer to create your theme? Superb work!

  21. melia biyang (reply)

    I feel that is among the so much important information for me.
    And i’m satisfied studying your article. However should remark on few common issues, The website taste
    is wonderful, the articles is truly excellent :
    D. Excellent task, cheers

  22. Erwin (reply)

    It’s hard to find educated people in this particular topic, however, you sound like you know what you’re talking about!

    my homepage … Garcinia Cambogia – Erwin -

  23. sell houses tips (reply)

    Today, I went to the beach with my children. I found a sea shell and gave it to my 4 year old daughter
    and said “You can hear the ocean if you put this to your ear.” She put
    the shell to her ear and screamed. There was a hermit crab inside and
    it pinched her ear. She never wants to go back! LoL I know this is totally off topic but I had to tell

    My webpage: sell houses tips

  24. chaussure nike (reply)

    whoah this blog is fantastic i love reading your articles. Keep up the good work!
    You recognize, lots of individuals are hunting around for this info,
    you can aid them greatly.

  25. pinterest (reply)

    We all know by now, that when you make a habit of connecting with potential customers little and often, on topics that they
    care about, you increase the likelihood of them doing business with
    you. While that mantra may have worked for Kevin Costner in “Field of Dreams,” it doesn’t necessarily work for credit union websites.
    how can businesses effectively use this new social media platform.

    my page; pinterest

  26. Социальная сеть города Липецк (reply)

    Why people still use to read news papers
    when in this technological world everything is presented on web?

    1. usps tracking (reply)

      Your article reflects the issue people are concerned about. The article provides timely information that reflects multi-dimensional views from multiple perspectives. I look forward to reading quality articles that contain timely information from you.

      usps tracking

  27. Pingback: blue ofica

  28. RobinS (reply)

    I have spent too long looking for an elegant fix like this – thank you!

    I wanted to use this on a fluid responsive page and so also needed it to work on window resize. The first issue is that the equalHeight function can never work more than once, because the chosen items are already equal height! I added a line to the start of the original function to set the item heights to “auto”:

    function equalHeight(group) {
    var tallest = 0;
    group.css(“height”,”auto”); //otherwise only works once!
    group.each(function() {
    thisHeight = $(this).height();
    if(thisHeight > tallest) {
    tallest = thisHeight;

    Then, a function equalHeightSet to run equalHeight with your chosen group(s) of items:

    function equalHeightSet() {
    $(document).ready(function() {

    Then a function to call equalHeightSet again if the window resizes:

    function resizeListen() {
    var resizeListener;
    var pause = 250;
    window.addEventListener(“resize”, function(){
    resizeListener = setTimeout(function(){

    On the page just include:


  29. Pingback: 30 Pro jQuery Tips, Tricks and Strategies | 朴人道素

  30. Pingback: awesome jQuery Tips And Tricks for Beginner

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>