[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.
Hi Dave,
FYI, I’ve updated jquery.equalizecols.js and it no longer requires the dimensions plugin to function.
Also, you might want to check out Michael Futreal’s vjustify plugin.
http://michael.futreal.com/jquery/vjustify
Tom
Tom,
Awesome. Thanks for the link and the update. I’ll look at both next time I have to do this. I think I had to go with mine because I had decorated boxes (with nifty cols or something) and needed an inner element to grow rather, than just the height of the box… it was very much a unique situation.
-d
@Dave: I just found out about your plugin. Have you posted it to the jQuery plugin repository? If not, it would be awesome if you could do that so we can have an updated copy there: http://jquery.com/plugins/
Rey jQuery Project Team
Rey
I posted it here.
Thanks.
-d
Just wanted to say thank you for your neat bit of code.
hi,
nice plugin! works good,but have a little problem.
Using this with IE, I get the fill div become too big when it’s smaller than the font-size (maybe in particular mode ?).
How about
$(t).attr(”class”,”fill”).css(”height”,gap “px”); to $(t).attr(”class”,”fill”).css(”height”,gap “px”).css(”overflow”,”hidden”);
?
There’s a similar solution, mostly interesting for all German-speaking jQuery-users: http://blog.highresolution.info/index.php?/highresolution/comments/equalheightsmit_jquery/
What if JavaScript is turned off? I’ve managed to do equal height columns without JavaScript and it works in all common browsers. Here are my examples:
Pixels: 3 column liquid layout – pixel widths
Ems: 3 column liquid layout – em widths
Percent: 3 column liquid layout – percentage widths