History

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.

We built the simplest three column CSS layout I could make and Scott reworked the JavaScript file to automatically pick the tallest column and compensate for box model issues.

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.

Cool new thing! This article is translated to Serbo-Croatian language by Anja Skrba from Webhostinggeeks.com. Or so I think. I may just be linking to Anja’s tribble fan site for all I know.

Balance your CSS Columns with JavaScript

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.

The HTML/CSS columns

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.

The Javascript

Javascript lets us read information about our page elements and apply values to a page element's CSS properties. That's handy, especially because we can do both at the same time.

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...

How to add this to your site

  1. Figure out what the ID names of the columns you want to balance are
  2. Look for this line at the top of column.js
    var divs = new Array('center', 'right', 'left', 'other');
    replace these ID names with the names you're using in your HTML and remove what you're not using
  3. You shouldn't need to edit anything else
  4. Link column.js in the header of your page:
    <script type="text/javascript" src="(pathto...)/column.js"></script>
  5. That's about it

Conclusion

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