The problem history

We first hit this problem on a site build for one of our clients. 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.

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.

I updated this to hold the simplest three column CSS layout I could make and Scott reworked the JavaScript file to automatically pick the tallest column and then automatically compensate for padding.

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 at A List Apart, we were able to tie in a text resize detector.

So here is version 3 of the solution.

Balance your CSS Columns with JavaScript

October 20, 2007 Version 3. We integrated Lawrence Carvalho's text resize detector script so the columns will balance if someone changes text size. We also rewrote our function to break the divs to be balanced out into an array and added some error checking to make sure each div exists on the page. That way you can use the same script throughout a site regardless of whether the number of columns changes on different page templates. 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 reset 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 in column.js
    var divs = new Array('center', 'right', 'left', 'sdlgdoqew');
    and replace these ID names with the names you're using in your HTML
  3. Link column.js to your page:
    <script type="text/javascript" src="column.js\"></script>
  4. 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