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!
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!
Rob Glazebrook [January 20th, 2009, 14:27]
Nice 2 line of code snippet :) but isn’t offsetHeight more accurate?
icaaq
icaaq [January 21st, 2009, 18:23]
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()
Paul Irish [January 21st, 2009, 18:42]
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.
SohoInteractive [April 21st, 2009, 04:39]
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 ?
Sebastien G. [November 12th, 2009, 15:45]
I confirm the issue with Chrome using Paul’s function.
However, it is still a must !
Antoine [December 19th, 2009, 20:29]
@ 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!
Daniel [May 17th, 2010, 15:15]
Great little snippet! Thanks for the help…
Tim [June 26th, 2010, 04:29]
Wow thats awesome. Really short way to equalize heights.
Monit [August 18th, 2010, 05:09]
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()
Robin [August 30th, 2010, 21:05]
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
junaid lone [January 20th, 2011, 11:22]
Thats way simple :)
I tried something here: http://aamirafridi.com/jquery/jquery-equal-columns-height-plugin
Aamir Afridi [March 17th, 2011, 16:43]
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.
Justin Little [June 3rd, 2011, 21:02]
Very Nice!…It really saved lots of my time and I didn’t required redesign my DIV alignmnets!..
Thanks again.
Ravi R [June 10th, 2011, 21:43]
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.
Gregg [July 21st, 2011, 04:24]
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
Clinton Green [September 1st, 2011, 23:57]
I have spent an insane amount of time trying to figure out Chrome and Safari fix. I cannot thank you enough!!!
Crystal [November 1st, 2011, 08:35]
Yes, props to Justin Little the issue with safari and chrome was driving me crazy!
Andy [November 17th, 2011, 17:42]
Thank you Justin Little!
Andrei [July 3rd, 2012, 23:50]
Another solution to make it work in Chrome/Safari is wrapping the function call in a setTimeout
setTimeout("$('.selector').setAllToMaxHeight();",0);
Martin Klerx [October 11th, 2012, 11:47]
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.
UV [March 31st, 2013, 10:40]
[…] Source: http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/ […]
Quick equal-height columns in jQuery | Marta Johnsson [April 11th, 2013, 14:03]
If anybody is interested, to make Paul Irish’s fix work in responsive design edit it like this:
Matt Coffey [July 9th, 2013, 08:03]
this snippet save my day :) Thanks!
kamal [October 4th, 2013, 15:06]
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, 17:00]