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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | // This Javascript is written by Peter Velichkov (www.creonfx.com)// and is distributed under the following license : http://creativecommons.org/licenses/by-sa/3.0/ // Use and modify all you want just keep this comment. Thanks 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;
}
You should try 2columns.net – Simple & Strictly CSS.
Interesting need to check if it will work with some more complex situations…
anyway seems nice
Hello, great idea. It’s pity, but it doesn’t work on IE6
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
Doesn’t work on a liquid layout. When you make your browser smaller, the divs won’t grow. ;)
Does it works on mootools 1.2.1, too? I am testing, but this example doesn´t work.
Thank you! This is exactly what I was looking for!
Doesn’t seem to want to work in IE8.
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 ;)