Equal height columns with jQuery

[tags]css, jQuery, layout, javascript, equal, columns, equal columns[/tags]

I’ve seen a few examples of how to equalize column heights using javascript, and none of them seem appealing:

• jquery.equalizecols.js
  • This required a few other libraries, and I wanted more flexibility (e.g. where the column should grow in order to equalize)
• Project 7
  • The Project 7 approach was the most interesting, but the code seemed a bit messy and not so open source friendly (even thought it might have been). It would let you specify which element was to grow inside a column.
• Nifty Corners
  • I had trouble with the syntax, but I liked how it just created a new element out of thin air…

So I wrote my own:

$("#col1, #col2").equalizeCols();

will equalize the columns as expected

$("#col1, #col2").equalizeCols("p,p");

will equalize the columns and add the extra space after the p tag in #col1 or #col2 (whichever is shorter).

Here’s our function:

This requires jQuery of course, and it hasn’t been tested much.