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