We were building a two-column CSS layout where the right column was fixed width and the left column was variable width, so we couldn't use any of the standard page-background hacks to balance the columns (no way to predict the size of the background graphic).
We wrote a simple script that reads the height of the taller column, then applies it to the height of the shorter column. After using it for a while I realized that it was a pain to manually update it all the time and people were having trouble getting their heads around offsetHeight vs style.height and how to apply the script so we abstracted it a bit.
A whole pile of people used it, and the one thing everyone wanted was a way to detect changes in text size to reset column size. Thanks to the great script by Lawrence Carvalho and Christian Heilmann at A List Apart, we were able to tie in a text resize detector.
So here is version 3 of the script.
October 20, 2007 Version 3. We integrated Lawrence Carvalho and Christian Heilmann's text resize detector script and rewrote our function with someerror checking to make sure each div exists on the page (so you can use the same script throughout a site even if the number of columns changes). Also we updated the CSS, which hadn't been rewritten since 2005 - it now includes the YUI font/reset classes and our Yellow Pencil base typography classes.
August 28, 2006 Version 2.1. We made it a little easier to apply and the script now uses a much better call method. Nothing changes except how it's referred in the file, should fix any issues folks have been having with Dreamweaver and other onload() style scripts, plus this is a much better version. I meant to update this months and months ago, but... well... I have a day job.
This is a common case. The CSS file for this page defines 3 columns, named #left, #right and #center. You could use tricks like a page background the same width as the left column that makes it look like the column continues down even if the content doesn't push it to the bottom. However, if you have a variable width layout, you can't do that since you can't make a variable width graphic.
Addressing the DOM (Document Object Model), we can ask for the height of the tallest column. Then we can tell the other 2 columns to have a style value of that height. That's about all there is to it. Here's the file...
I'd appreciate feedback if you're nice.
We're all trying to get smarter.
Here's a zip of the JS, CSS and HTML: Balance your Columns
Feel free to use the CSS if you find it helpful
We wanted a solution that:
We think this does that.