« Smooth Scrolling Links
Coherence for testing »

Equal Height Columns

There are no CSS hacks that can get equal-sized columns, so I wrote this tiny bit of Javascript to do the work for you. Simply add a class of “column” to any <div>s and their heights will match when the page loads.

function matchColumns()
{
	var columns = $A($$('div.column'));
	var column_height = 0;
	var max_height = 0;
	columns.each(function(column)
	{
		column_height = column.getHeight();
		max_height = ( column_height > max_height ) ? column_height : max_height;
	});
 
	columns.each(function(column)
	{
		column.setStyle({
			height: (max_height + 10) + 'px'
		});
	});
}
 
Event.observe(window, 'load', matchColumns);

As always, this script requires prototype, and will work better if you have a DOMReady function instead of window.load.

This entry was posted on Tuesday, July 10th, 2007 at 11:48 am and is filed under javascript, prototype, work. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

3 Responses to “Equal Height Columns”


  • Tim
    February 6th, 2008 21:44
    1

    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’});
    }

  • Xit
    March 17th, 2008 22:51
    2

    Wahou ! Thanks a lot !

  • edd
    April 10th, 2008 09:25
    3

    @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’ });

Leave a Reply