Equal height divs
Time for another geeky web programming related post :p Today’s topic, equal height columns. Back in the old days, when everybody was using tables, creating equal height columns was a piece of cake. The height of a table row - <tr> - and it’s cells was automatically changed to accommodate any amount of content. Nowadays, in our brand new Web2.0 world, people don’t use tables to set up the layout of a page. Everybody goes for CSS now. But using only CSS is pretty hard (to be read “almost impossible”) to set up a page where multiple columns have the same height. And it becomes even harder to do so when a column changes size (some hidden content is displayed). What then? Well, of course, javascript to the rescue.
I’ve wrote a small script that computes the maximum height between several divs, and forces this height on the shorter divs. You can also add a listener to monitor if one of the divs changes height and if that happens, the script will act accordingly, making all the divs equal again.
It’s quite simple to use, just insert this script anywhere on your page:
Event.observe( window,
'load',
function() {
var e = new Equalizer( 'div1', 'div2', 'div3');
},
true );
Where div1, div2 and div3 are the ids of the divs representing the columns. If you need to add some extra content in one of those divs, just start a PeriodicalExecuter to check if one of the divs changed size.
Event.observe( window,
'load',
function() {
var e = new Equalizer( 'div1', 'div2', 'div3');
var pe = new PeriodicalExecuter( function() {
Equalizer.keep( e );
}, 1 );
},
true );
Enough said, here is a working demo. You can get just the js file from here, note that the prototype library is required in order for the script to work.
This script was tested in many browsers, such as IE6 & 7, Firefox, Opera, Safari (Windows version) and Flock and it worked, but experience taught me to always expect the unexpected, so things might go wrong at any time. When this happens, don’t panic, just a post a short message below, describing your error.
Bugs I already know about
Yes! I know that there are some problems with this script and I’m going to fix them. Or at least try to do so.
The first problem is that when additional content is added to a div, the rest of them stretch to the new height. But when the extra content is hidden, all the divs keep the new height. That’s because the minHeight attribute still holds the larger value that was set when the hidden content became visible. The approach I’ve tried so far was to compute the height of a div as the sum of all its visible childrens’ heights, rather then to use the div’s CSS defined height as it’s returned by the Element.getHeight() method.
/**
* computes the height of a div as the sum
* of its visible childrens' heights
*
* @param DOMObject div
*/
getComputedHeight = function( div ) {
if ( div.hasChildNodes() ) {
var height = 0;
var child = null;
for( var index = 0; index < div.childNodes.length; index++ ) {
if ( div.childNodes[index].nodeName != '#text' ) {
child = $( div.childNodes[index] );
if( child.visible() ) {
height += child.getHeight();
}
}
}
return height;
}
return div.getHeight();
}
For some unknown reason, this doesn’t quite work as I expected 
But I’m working on it!
The other problem I came across and I was unable to fix so far is the fact that the divs change height when the user changes the font size (CTRL+/CTRL-). Quite normal behavior, but annoying in this case.
If you have any idea in how to solve these problems, please post a comment bellow or contact me. Credits will be given.
de ce nu se pot folosi pur si simplu tabele? vor fi scoase in editiile viitoare ale browserelor si eu nu stiu?
For the same reasons I don’t buy a car with an automatic gearbox. It takes all the fun out
Oh, sorry, I see you have an unwritten rule here: For English articles post English comments.
The question I asked before was (short version): why don’t just… use tables?!
It’s not unwritten and it’s not a rule. It’s more a recommendation I’ve made in the Read this section.
Aaah.. the holy grail of table-less design
For your second problem, you could also check for the font change in your PeriodicalExecuter. Here’s a discussion that migut spark your imagination, on the mootools forums:
Determine when font size is changed in browser
[…] time ago, I’ve wrote a post about equal height divs, and, as I’ve already said there, that script has some problems, and one of them occurs when […]
… I don’t know any javascript and I found a solution that doesn’t require any. i just placed for example div1, added div2 in div1 and div3 in div2 and aligned them with margin from one another. plus float: left; for all of them. and if my content in div3 has a height bigger than that of div2 or div 1 the divs adjust in height to match that of div3. works if you take content out as well. it’s tricky and involves lots of divs but it works.
Do you have a working example? I would be more than interested in this hack…
Using your hack on several divs deep into my page code, the script works but for some reason, now the two divs continue to grow forever, LOL, does this have something to do with setting html, body to height:100%.
Me again, after pulling my code apart I discovered that this script does not care for the padding attribute, by adding any padding to any div you wish to place into this script you will create the problem I stated above where the divs just keep expanding in increments forever. I haven’t tested any other attributes for this problem, but the easiest fix would be to use wrapper divs for the script and apply attributes to an nested div, with that said, script works great, THANKS!
Hello,
this script works great, but I have one question.
I couldn’t make it work, so I checked the source of the example page. I copied the links to .js files on your website and added it to my page instead of links that were pointing to .js on my website and it was fine.
instead of
The .js codes are similar, because I copied them from .js on your websites, and I’m 100% sure that links were fine.
Best regards,
Johnny
Hello,
this script works great, but I have one question.
I couldn’t make it work, so I checked the source of the example page. I copied the links to .js files on your website and added it to my page instead of links that were pointing to .js on my website and it was fine.
src=”http://www.it-base.ro/examples/libs/prototype.js
instead of
src=”../javascript/prototype.js
The .js codes are similar, because I copied them from .js on your websites, and I’m 100% sure that links were fine.
Best regards,
Johnny