The [Genesis 6.x-2.x starter theme](http://drupal.org/project/genesis) comes with a jQuery plugin to make equal height columns a breeze. Usage is completely optional and all you need to do is uncomment the script in genesis.info, clear cache data in Performance settings and it will work.

The savvy amongst us will note that the plugin can be re-used and is not necessarily just for equalising the height of columns. You could just as easily re-purpose this for any set of boxes.

## Caveats

1. Wont resize boxes when the browser window is resized.
2. Wont resize boxes when the font size is changed.
3. In fact won't dynamically resize at all.

This is the price we pay for simplicity. Accommodating all manner of dynamic resizing could bloat the script, and at a mere 1.32kb [minified](http://en.wikipedia.org/wiki/Minify) I think its worth the trade. My view is that if you really want to support resizing there are solutions out there (or you can just write your own), and they're not that hard to implement. For Genesis I wanted something lightweight and re-usable. It also had to be easy—I think this fits the bill quite nicely.

## What does it actually do?

> equalHeights() loops through the top-level child nodes of a specified element and sets their min-height values to that of the tallest.[^1]

Note that for IE6 the script uses `height` rather than `min-height`, which is interpreted as `min-height` by IE6.

So to recap, all you need to do to use this is uncomment the script in genesis.info and clear the cache.

If you have more than one subtheme and only want it for one of them, just copy/paste the minified script to your subtheme and call it from your subthemes .info file as per normal.

[^1]: [http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/](http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/)