Very quick equal-height columns in jQuery

Warning This article was written over six months ago, and may contain outdated information.

I’m having a bit of a love affair with jQuery, the Javascript library, at the moment. I know my way around JS but am far from an expert, so jQuery’s simple syntax is a godsend for me, and provides huge savings in my development time.

One quick technique I used yesterday was to make three elements of equal height; it’s very simple and won’t cope with dynamic content, but is perfectly suitable for simple page layouts.

The code simply takes the elements involved (I’m using two in this example), calculates the height of the tallest, and sets the heights of the others to match:

var highestCol = Math.max($('#element1').height(),$('#element2').height());
$('.elements').height(highestCol);

There’s nothing groundbreaking about this, and I’m certainly not claiming to have invented the technique (there’s another version here, for example); I provide it here only as an example of how jQuery makes layout problems easy to resolve.

I’ve since discovered that there’s a plugin which will do this for you, which is much more useful if you want to work with multiple elements, but mine has the advantage of being only two lines!

25 comments on
“Very quick equal-height columns in jQuery”

  1. Excellent work, Peter. And I’d agree… a plugin is useful for those who don’t know jQuery well, or have many elements to adjust, but your two-line solution is impressive and elegant. I’d never thought of using the ‘max’ function… that’d help simplify my stuff significantly. Thanks for sharing!

  2. Nice 2 line of code snippet :) but isn’t offsetHeight more accurate?

    icaaq

  3. I wrote and use something pretty similar:

    $.fn.setAllToMaxHeight = function(){
    return this.height( Math.max.apply(this, $.map( this , function(e){ return $(e).height() }) ) );
    }

    // usage: $(‘div.unevenheights’).setAllToMaxHeight()

  4. I think this is the simplest solution for equal height dilemma.
    I’ll test it on all browsers before give it a “go”

    Thanks

    K.

  5. Well… I’ve tried this method already everything is working fine on IE and Firefox but when I tried it on Google Chrome, everythings seems to worked fine until a refresh (when I browse onto the site everything is fine… only on refresh) the page where I used that snippet.

    Any ideas anyone ?

  6. I confirm the issue with Chrome using Paul’s function.
    However, it is still a must !

  7. @ Paul Irish: Thank you man! your small function is much better then EqualHeights plugin, I tested in all browsers and your script doesn’t have show any browser bugs.

    Perfect, Thank you!

  8. Great little snippet! Thanks for the help…

  9. Wow thats awesome. Really short way to equalize heights.

  10. i like Paul Irish code!

    $.fn.setAllToMaxHeight = function(){
    return this.height( Math.max.apply(this, $.map( this , function(e){ return $(e).height() }) ) );
    }

    // usage: $(‘div.unevenheights’).setAllToMaxHeight()

  11. thank you very much
    i wrote another code which worked fine in firefox and chrome but
    IE was sucking me .and your code worked there

  12. Thats way simple :)

    I tried something here: http://aamirafridi.com/jquery/jquery-equal-columns-height-plugin

  13. Use the jquery equal Heights plugin and use this script

    $(window).load(function() {
    $(‘.equal’).equalHeights();
    });

    $(window).load is the fix for safari and chrome. Without using it this way it’s really inconsistent.

  14. Very Nice!…It really saved lots of my time and I didn’t required redesign my DIV alignmnets!..

    Thanks again.

  15. if you’re having trouble with google chrome, it could be because there are images or 1 image in the taller div or element. Without a width and height, chrome doesnt know the height correctly.

  16. Thanks Justin Little, I was trying lots of different equal-height scripts but still getting that same issue with chrome & safari. $(window).load worked great. You are awesome, cheers

  17. I have spent an insane amount of time trying to figure out Chrome and Safari fix. I cannot thank you enough!!!

  18. Yes, props to Justin Little the issue with safari and chrome was driving me crazy!

  19. Thank you Justin Little!

  20. Another solution to make it work in Chrome/Safari is wrapping the function call in a setTimeout
    setTimeout(“$(‘.selector’).setAllToMaxHeight();”,0);

  21. Thanks Peter! Put this in the .ready() and works very well for me. Just one remark that might help others. When you have images in one or more of the columns, do not forget to specify the height-attribute. I did accidentally and ended up with equal but very, very short columns. After adding the attribute, everything was fine.

  22. […] Source: http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/ […]

  23. If anybody is interested, to make Paul Irish’s fix work in responsive design edit it like this:

    $.fn.setAllToMaxHeight = function() {
      return this.height(Math.max.apply(this, $.map(this.children(), function(e) { 
        return $(e).height();
      })));
    };

    Matt Coffey [July 9th, 2013, 8:03 am]

  24. this snippet save my day :) Thanks!

  25. Here’s a responsive equal height column code for jQuery. You set the resizable class elements via an array and it does the magic. It detects things like window orientation and resize, row ends and you are able turn it off individually by adding a class.

    Responsive equal height column for jQuery

    Timo Hänninen [December 11th, 2013, 5:00 pm]