Equal Height for Two / Three Columns DIV Layout

Something that really stops tableless layouts is the lack of ability to make two or three columns the same height. There are a lot of tricks but the solution I prefer is with Javascript.

Description of the solution: I used the mootools framework since it provides lots of useful predefined methods, selectors etc.

Usage: Just include the latest mootools js file (don’t need ajax, json, fx and other) and the following js. Than add the class defined in the function (class=”equals” in the example) to the columns you want to be in equal height.

function equalHeight(cl){
	var className = '.' + cl;
	var maxHeight = 0;
	$$(className).each(function(el) {
	if (el.offsetHeight & gt; maxHeight) {
		maxHeight = el.offsetHeight;
	}
	});
	
	if ($$('.dummyExtender') != '') {
	$$('.dummyExtender').each(function(el) {
		el.setStyle('height', maxHeight - el.getParent().offsetHeight + el.offsetHeight);
	});
	} else {
	$$(className).each(function(el) {
		var curExtender = new Element('div', {
		'class': 'dummyExtender'
		});
		curExtender.injectInside(el);
		curExtender.setStyle('height', maxHeight - el.offsetHeight);
	});
	}
}

window.addEvent('load',function() {
    equalHeight('equals');
});

Example: Equal Height DIV Columns

Update: Also since Internet Explorer 6 adds silly spacing in DIVs add the following lines to your css:

.dummyExtender{
font-size:0;
line-height:0;
padding:0;
margin:0;
}

Comments

Comment by Asia on 2007-10-08 21:21:24 +0300

You should try 2columns.net – Simple & Strictly CSS.

Comment by admin on 2007-10-08 22:27:32 +0300

Interesting need to check if it will work with some more complex situations…

anyway seems nice

Comment by smile on 2007-10-19 07:58:25 +0300

Hello, great idea. It’s pity, but it doesn’t work on IE6

Comment by admin on 2007-10-19 13:40:20 +0300

Silly me that will be fixed for sure

update: it works just the longest one is extended a bit since ie adds some dummy padding. Still thanks for the remark

update 2: Fixed

Comment by Xevo on 2008-06-13 02:27:22 +0300

Doesn’t work on a liquid layout. When you make your browser smaller, the divs won’t grow. ;)

Comment by manela on 2008-11-10 13:40:04 +0300

Does it works on mootools 1.2.1, too? I am testing, but this example doesn´t work.

Comment by Tyler on 2009-02-23 20:27:52 +0300

Thank you! This is exactly what I was looking for!

Comment by rob on 2010-02-18 20:59:42 +0300

Doesn’t seem to want to work in IE8.

Comment by Christopher Dosin on 2010-06-15 19:10:18 +0300

Thank you so much! I found a jQuery Plugin, but if you`re working with joomla you need mootools.

so thats a perfect solution for me, thanks ;)