Comments on: Equal Height Columns

By: Matthew James Taylor

Matthew James Taylor — Sat, 25 Oct 2008 01:48:16 +0000

Why use JavaScript when equal height columns with cross-browser CSS is possible?

By: Rick

Rick — Sat, 14 Jun 2008 21:49:10 +0000

I just need a simple explanation of what the code surrounding the function should be. I have:

…

Also I’ve placed prototype.js in my main directory, but don’t know exactly what needs to be done to install that.

Thanks,
Rick

By: edd

edd — Thu, 10 Apr 2008 09:25:19 +0000

@Tim, it’s even easier to do the following:
var columns = $$(’div.column’),
height = columns.inject(0, function (acc, el) {
var h = el.getHeight();
return (h > acc) ? h : acc;
}
columns.invoke(’setStyle’, { height: height + ‘px’ });

By: Xit

Xit — Mon, 17 Mar 2008 22:51:56 +0000

Wahou ! Thanks a lot !

By: Tim

Tim — Wed, 06 Feb 2008 21:44:47 +0000

Even easier with Prototype 1.6:
function matchColumns()
{
var columns = $$(’div.column’);
var max_height = columns.invoke(’getHeight’).max();
columns.invoke(’setStyle’, {height: (max_height + 10) + ‘px’});
}