Setting Equal Heights with jQuery

This is great! I actually have an immediate use for this technique.

We were in the process of writing a script to do this so f-ing thanks!

This should make the perfect study on how to turn some tacked-on code into an actual plug-in.

( one next step might be to get this into the tabs UI component as the default behavior )

I published a similar script a while back. My script takes an arbritrary collection of elements, rather than acting on top-level children of a container element. I think your use case is by far the most common, but I recently had a need to equalize elements that didn’t have a common parent.

I recently updated my demo page using my new “onfontresize” custom event script to ensure that the element heights are re-equalized when the user resizes her fonts.

http://tomdeater.com/jquery/equalize_columns/

nice, Ill give a try now, thanks for sharing

Is it possible to resize the elements after text has been resized in a browser?

Despite this:
and sets their min-height to the tallest height (or width to widest width). Sets in em units by default if pxToEm() method is available.

I can’t figure if it’s already set in em unit because when I enlarge font-size, I am getting unequal height.
With ‘true em unit’ you will always get the same ‘equal height’.

Nice though.

Perhaps you should check out my nested container equal height columns with pure CSS, these should do everything you need without the JavaScript.

@Matthew James Taylor:

I like your solution, however the problem with it is that not all CMS systems can spit out HTML in that sort of way. Some will only generate content per object, and therefore you can’t predict - ahead of time, how many containers you will have. The best you can do is to spit the objects out and wrap them in a common element (the .container).

This solution really solves that problem, since you can spit out an x-number of containers, and then toggle the JS over all those containers for them to equalize.

This works great.  I had grid of floated div’s that I wanted to fill a dynamic width then wrap. Unfortunately the wrapping was occassionally out of wack if the heights varied just slightly, not anymore. Nicely done, and much thanks!

When browser checking on firefox 2.0.0.17 I did find some odd behavior. While this may only be related to the way I am using it, I thought I’d share that changing lines 29:30 to the following fixed my issue:

jQuery(this).children("div").css({ “height” : currentTallest, “min-height” : currentTallest });

From what it seems it didn’t like children() without an element.

Your script doesn’t work in my IE 6.

A,C & D are equal but B is taller.

This is awesome. Is there a way to make this work with rounded corners? How about with borders AND rounded corners?

Nice!

This is cool.  Can it be made to act on certain classes rather than all children of and element?

Great!!! Will try this

I was having issues with the script starting before the images were loaded and so the min-height that got calculated was wrong.  This is what I did to fix it:

$(function(){
if ($(’img’).length) {
$(’img’).load(function() {
$(’#column_wrap’).equalHeights();
});
} else {
$(’#column_wrap’).equalHeights();
}
});

Great little script.
Very useful! Thank you

Thanks for the work - having an issue in Google Chrome though - it’s making the columns equal height, but there’s added padding. I assume it’s not calculating the height correctly?

I find this script very useful, but it has an important issue:  It assumes that the elements share the same padding size.

I had to change height() by innerHeight() when getting the currentTallest:

$(this).children().each(function(i){

__if($(this).innerHeight() > currentTallest) {
____currentTallest = $(this).innerHeight();
__}

});

And then change children with an each(), to check each one’s padding before setting it’s height.

var cssname = ‘min-height’;

if ($.browser.msie && (ie6)) { cssname = ‘height’; }

$(this).children().each(function(i){

__$(this).height(currentTallest -
_______________($(this).innerHeight() - $(this).height()));

});

If you’d like to include the borders too, then you should change innerheight with outerheight.

Very nice job!
I just had a problem, line 24: if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified…
Just commented that and worked fine.

The script doesn’t work on IE7 with jquery 1.2.3. The following error is displayed:
Invalid argument.
jquery-1.2.3.min.js
Code:0
Line:24
Char:1337

Any chance of adding a function to equalize the baselines of divs inside the container? Similar to this:

http://v3.thewatchmakerproject.com/journal/354/equalising-box-baselines-with-javascript

So you can go from this - http://jsbin.com/eguze - to this - http://jsbin.com/ofehi

Great plugin!
It’s beautifully crafted, I was wondering though is there a way to incorporate callback function for when all the images have completed loading? Im sorry Im a terrible code reader ...

I’ve used similar plugin long ago

http://www.tomdeater.com/jquery/equalize_columns/

it gives the same result.

Good technique. I solved the height problem in firefox on Linux machine by this technique for my layout. It’s working fine for me. Thank You

Very useful..But i am still not clear about not using CSS ...

Wow, this is awesome!

Hi, great script!

I also had the issue with line 24, and commenting it out worked fine. Only reason I mention is because the page states that it should default to px if the pxToEm script isn’t present, but it doesn’t work unless you comment this out.

Also, what is the symantically correct way to clear your floated divs here without having your clear div also set to the min-height?

Thanks!

Great script. I had hacked up my own version, but yours does the job more elegantly than mine did.

One item of note: when writing a jQuery plugin, you should use jQuery in place of the $ shortcut, as people might be using jQuery in no-conflict mode, thereby breaking your plugin.

Had to rip apart a client supplied table based design today with a VERY short deadline - remembered your script and worked great!

The pxtoEm part stalled javascript so I removed as I didn’t need it.

Had one issue not mentioned before - I had a div with images in floated to the right of it’s sibling - as the text was far taller than the floated div, the non float wrapped under, so when the equalHeights script was called it sized the float div correctly to the height of the sibling, HOWEVER after the resize, logically the sibling increased in height due to no longer wrapping under the float - this resulted in mismatched heights again.

Made a very small change to the script to recursively call until a match was 100% certain:

$.fn.equalHeights = function(px,matched) {
$(this).each(function(){
var currentTallest = 0;
$(this).children().each(function(i){
if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
});
if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({’height’: currentTallest}); }
$(this).children().css({’min-height’: currentTallest});
$(this).children().each(function(i){
if ($(this).height() > currentTallest) matched=false;
else matched=true;
});
if (matched!=true) $(this).equalHeights(true,false);
else return this;
});
};

it’s called with a further ‘match’ parameter, initially set to false, ie//

$(function(){ $(’#container’).equalHeights(true,false); });

hi there,
thanks for such a useful script. it works perfectly with my firefox browser but for some reason its not working with IE7. i am using 3 column div lay out…
thanks
-jubair

RE: Nate on 02/09

Adding height and width attributes to your image tags will help browsers render the page quicker as well as prevent content shifts as the page loads. May help with your equal columns, too.

This is explained lucidly and it worth giving a try. And thanks for sharing the same!

So this doesn’t seem to work for me.  When I inspect in Firebug the two container heights are being set equally (which is good).  However when I show/hide content within one of the containers, the min-height does not change for either container and thus results in unequal heights.

HTML

<div id="promoGiftSection">
<div id="promoCodeSection">
Sorry!  This promotion requires a membership
<input name="promoCode" type="text" id="promoCode" />
<input name="go" type="button" />
</div>
<div id="giftCardSection">
<h4 class="baseCopyEm">Gift Card or eCertificate</h4>
<input name="giftCard" type="checkbox" id="gcFieldsToggle" />
<label for="gcFieldsToggle" class="inline">I have a Gift card</label>
<ul id="gcFields">
<li>
<label for="giftCardNo">* Card Number</label>
<input name="giftCardNo" type="text" id="giftCardNo" />
</li>
<li>
<label for="giftCardPIN">* PIN</label>
<input name="giftCardPIN" type="text" id="giftCardPIN" />
</li>
<li class="submit">
<input name="go" type="button" />
</li>
</ul>
</div>
</div>


JS

$("#promoGiftSection").equalHeights(true);


A question to the filament group:
Is there any way to combine this script with CurvyCorners ( http://www.curvycorners.net/ )? I cant get it to work :(

Nate, that’s a clever hack for handling columns withs images. thanks…

do you want the really shortcut ? use class :D

<div id=’div1’ class=’sameClass’></div>
<div id=’div1’ class=’sameClass’></div>
<div id=’div1’ class=’sameClass’></div>
<div id=’div1’ class=’sameClass’></div>
<div id=’div1’ class=’sameClass’></div>
<div id=’div1’ class=’sameClass’></div>

.sameClass{
height: 300px;
}

done !!!

Thanks for sharing, looked long back today got a chance to use this! works exactly as required!! thanks again!!

Nice tutorial!
I´ve been using CSS in my projetcs and this script above will be extremelly useful.
Thanks a lot!

I used CSS solution to get equal heights for solid layouts in my drupal themes, preferred matthew’s holy grail technique rather than alisapart. Yet this sort of javascript’s solution may also come in handy with simple page elements or blocks, especially when I have to dynamically generate blocks, and the blocks have to be flexible enough that may exist whether they are one, two, three, .. etc column blocks in various pages. Thanks for the tut.

Any idea why I would have to refresh the page for the change to take place?

When the page originally loads I see the unequal columns.  But, once I hit refresh the columns equalize.

I am using FF3 on a mac.

Very Nice, Thank you for your sharing .

Cheers
Elijah

displaying “G.replace not a function” error. 
i got prototype.js and jquery-1.3.2.min.js in same page.
i did replace $ with jQuery and include jQuery.noConflict().
but still showing above error.

Thanks.
rvs

提供下载吗?

http://www.fusionteam.co.uk/blog/2009/09/28/setting-equal-heights-using-jquery/

The information provided is very useful to harness our skills further. This really provides a good understanding and simple explanation of the material.

biligiler cok iyi ya beendıms aolun

tanks for the information, its much usefull.  i will comment in my blog about your post.

tank you.

vety nice taks admin

i use the same method but i fnd some throble with ie8 some body know any solution? (my tables don’t show).

I like this solution, it can save some annoying div nesting, but i use css instead(thanks to Mathew James Taylor for that), because you’ll usually have dinamyc content and when objects move around the heights change. With css all columns preserve the same height.

hi, this solution that all i search some many time, tank you for your publication.

Hi guys,

I have a little problem with this plugin.

In my div #equalize, I have another div with class minifiche and another one with css clear: both. EqualHeight works perfectly with minifiche but it give the same height to the div with clear.

How can i resolve this ? Thx.

After many try, I manage to do what I want.

$(’#clearer’).css({’height’: 0 + ‘px’});
$(’#clearer’).css({’min-height’: 0 + ‘px’});

Very simple :D

Great plugin! It works fine in Firefox and IE, but in Chrome it’s not working at all here

Hi this is nice code, but when I add any paragraph in B box then on IE 6 or IE7, I will get 2 px more height. Compare A and C boxes. Please give me any solution.

Thanks

Amol Kshirsagar