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, 2:27 pm]
Nice 2 line of code snippet :) but isn’t offsetHeight more accurate?
icaaq
icaaq [January 21st, 2009, 6:23 pm]
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, 6:42 pm]
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, 4:39 am]
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, 3:45 pm]
I confirm the issue with Chrome using Paul’s function.
However, it is still a must !
Antoine [December 19th, 2009, 8:29 pm]
@ 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, 3:15 pm]
Great little snippet! Thanks for the help…
Tim [June 26th, 2010, 4:29 am]