jquery.equalizecols.js

Change Log

Date

Notes

5/8/2007

Initial release

5/9/2007

Now compensating for top/bottom borders/padding when setting the element height. However, this requires that document is using the W3C box model and that the borders/padding are specified in px. The IE "quirks" box model and em or % units are not currently supported.

5/10/2007

Renamed an internal function. Added notes regarding how to handle dynamic content in a column and browser text-resizing.

5/17/2007

Updates inspired by Michael Futreal's vjustify plugin. equalizeCols() is no longer dependent on the jquery dimensions plugin. Rewrote the logic for handling borders/padding in the height calculation, so it should now work with either W3C box model or IE "quirks" box model. The older version of the plugin can be found here.

7/3/2008

Updated the height "reset" method for IE (uses "1%" instead of "auto" to allow IE to shrink the elements correctly when the font size is decreased). Updated example to show this plugin working in conjuction with my new jquery.onfontresize.js plugin to re-equalize element heights when the user resizes her browser font.

2/5/2010

The previous "fix" for IE only worked for IE6. Added additional browser-sniffing (grrr) to support IE7/8.

This is column 3
This is column 3
This is column 3
This is column 3
This is column 3
This is column 3
This is column 3
This is column 3
This is column 3

Notes

Michael Futreal has written a very similar plugin called vjustify (btw, vjustify is a much cooler name than equalizeCols). He has identified an issue where columns containing images without specified dimensions can cause the height calculations to be incorrect if the plugin is invoked before the images have loaded. Refer to his page for additional information.

If any of the columns contain dynamically updated content, you'll want to call $(elems).equalizeCols() anytime that you show/hide/update content in one of the columns.

UPDATE: the example code above demonstrates using my jquery.onfontresize.js plugin to re-equalize the element heights when the user resizes her browser font.

A slightly more difficult issue is how to handle text resizing in the browser. So far, the only way I've found to deal with that is to use the jQem plugin: