Setting Equal Heights with jQuery

Posted by Maggie and Scott on 07/25/2008

July 8, 2016 Update: The techniques described in this blog post have been deprecated in favor of the Equal Heights section on our Layout Patterns documentation.

We wrote a script to “equalize” the heights of boxes within the same container and create a tidy grid — with little overhead.

Creating the visual effect of equal-height columns or content boxes has been a challenge ever since we abandoned table-based layouts. When developing complex web applications or site designs we’ve found that it often makes the most sense from a usability and performance standpoint to use a simple JavaScript workaround: our equalHeights() function determines the heights of all sibling elements in a container, and then sets each element’s minimum height to that of the tallest element. When JavaScript is disabled, the boxes or columns appear with varying heights, but the content remains legible and the page is still completely usable.

Why not just use CSS?

We advocate using CSS whenever possible, and we often can because there are many clever ways to create the illusion of equal-height boxes without resorting to setting a fixed height, like Dan Cederholm’s faux columns. This and similar techniques are great for columns in a page layout, but they don’t translate very well when we’re building, say, a web application dashboard page where 4 small widget boxes sit in a “row.” In this case we could create an uber tiling background image that has backgrounds for 4 columns, but we’d also have to design the boxes with square corners (or make a big sliding door), fix the widths of each box, and make sure the markup lines up exactly with the background image. Or, because CSS2 only supports one background image per element, we could nest 4 separate divs, each with it’s own positioned background image. No matter how we approach it, we’ve yet to come across a CSS-only solution to this use case that doesn’t require pixel-exact calculations when creating the background images, or a significant amount of unnecessary markup. Let’s not even discuss what you have to do when the boxes can vary in width, too.

JavaScript to the rescue

Calling equalHeights() on DOM ready let’s us keep all of the important factors in play, without adding extra markup or complex CSS workarounds:

  • usability. This is strictly a visual effect, so when the script is absent, columns are of varying heights and the page remains totally usable.
  • layout flexibility. The script assigns a min-height value (not height), so when content is added through user interaction or via AJAX running in the background, or if the user increases the browser text size, the content box will grow to fit. Columns or boxes can keep their percentage or em-based widths.
  • performance. It’s lightweight — has a small footprint, and doesn’t insert any DOM elements or require extra markup — and unobtrusive because, like other jQuery plugins, it’s called on standard CSS selectors.

How it works

equalHeights() loops through the top-level child nodes of a specified element and sets their min-height values to that of the tallest. It’s set up as a standard jQuery plugin, and is called on the container element:

$('.container').equalHeights();

In our version of the script the default unit is set to ems so that the content boxes will scale. This requires another of our methods, pxToEm; if it’s not present, the default unit reverts to pixels. Or, if you’re using pxToEm, you can override the default and pass a “true” argument to set the unit in pixels.

Demo page

Download (and help us improve) the code

This code is open source and available in a git repository, jQuery-Equal-Heights. If you think you can help on a particular issue, please submit a pull request and we’ll review it as soon as possible.

600

Comments

<div id="commentNumber1" class="commentEntry">
<p>This is great! I actually have an immediate use for this technique.

</div>
    <p class="posted"><a href="#commentNumber1">Comment</a> by

Nosredna on 07/25  at  02:13 PM

<div id="commentNumber2" class="commentEntry">
<p>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 )

</div>
    <p class="posted"><a href="#commentNumber2">Comment</a> by

Scott Fitchet on 07/25  at  02:28 PM

<div id="commentNumber3" class="commentEntry">
<p>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/

</div>
    <p class="posted"><a href="#commentNumber3">Comment</a> by

Tom Deater on 07/28  at  01:19 PM

<div id="commentNumber4" class="commentEntry">
<p>nice, Ill give a try now, thanks for sharing

</div>
    <p class="posted"><a href="#commentNumber4">Comment</a> by

acms on 08/02  at  03:00 PM

<div id="commentNumber5" class="commentEntry">
<p>Is it possible to resize the elements after text has been resized in a browser?

</div>
    <p class="posted"><a href="#commentNumber5">Comment</a> by

Andrew Care on 08/16  at  06:12 PM

<div id="commentNumber6" class="commentEntry">
<p>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.

</div>
    <p class="posted"><a href="#commentNumber6">Comment</a> by

sutra on 09/19  at  08:15 AM

<div id="commentNumber7" class="commentEntry">
<p>Perhaps you should check out my <a href="http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks" rel="nofollow">nested container equal height columns with pure CSS</a>, these should do everything you need without the JavaScript.

</div>
    <p class="posted"><a href="#commentNumber7">Comment</a> by

Matthew James Taylor on 10/24  at  10:23 PM

<div id="commentNumber8" class="commentEntry">
<p>@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.

</div>
    <p class="posted"><a href="#commentNumber8">Comment</a> by

Anton Babushkin on 11/09  at  06:53 PM

<div id="commentNumber9" class="commentEntry">
<p>This works great.&nbsp; 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!

</div>
    <p class="posted"><a href="#commentNumber9">Comment</a> by

Inlime on 11/18  at  07:45 PM

<div id="commentNumber10" class="commentEntry">
<p>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.

</div>
    <p class="posted"><a href="#commentNumber10">Comment</a> by

Inlime on 11/19  at  09:26 AM

<div id="commentNumber11" class="commentEntry">
<p>Your script doesn’t work in my IE 6.

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

</div>
    <p class="posted"><a href="#commentNumber11">Comment</a> by

Al on 11/21  at  05:55 PM

<div id="commentNumber12" class="commentEntry">
<p>This is awesome. Is there a way to make this work with rounded corners? How about with borders AND rounded corners?

</div>
    <p class="posted"><a href="#commentNumber12">Comment</a> by

Patrick Elward on 01/18  at  02:13 PM

<div id="commentNumber13" class="commentEntry">
<p>Nice!

</div>
    <p class="posted"><a href="#commentNumber13">Comment</a> by

longstep on 01/19  at  03:16 AM

<div id="commentNumber14" class="commentEntry">
<p>This is cool.&nbsp; Can it be made to act on certain classes rather than all children of and element?

</div>
    <p class="posted"><a href="#commentNumber14">Comment</a> by

velocitykendal on 01/22  at  10:03 AM

<div id="commentNumber15" class="commentEntry">
<p>Great!!! Will try this

</div>
    <p class="posted"><a href="#commentNumber15">Comment</a> by

dsignz media on 02/09  at  05:13 AM

<div id="commentNumber16" class="commentEntry">
<p>I was having issues with the script starting before the images were loaded and so the min-height that got calculated was wrong.&nbsp; This is what I did to fix it:

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

</div>
    <p class="posted"><a href="#commentNumber16">Comment</a> by

Nate on 02/09  at  06:09 PM

<div id="commentNumber17" class="commentEntry">
<p>Great little script.

Very useful! Thank you

</div>
    <p class="posted"><a href="#commentNumber17">Comment</a> by

Omdu on 02/10  at  03:03 PM

<div id="commentNumber18" class="commentEntry">
<p>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?

</div>
    <p class="posted"><a href="#commentNumber18">Comment</a> by

chief on 02/16  at  03:08 PM

<div id="commentNumber19" class="commentEntry">
<p>I find this script very useful, but it has an important issue:&nbsp; 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.

</div>
    <p class="posted"><a href="#commentNumber19">Comment</a> by

hernan on 03/12  at  10:22 AM

<div id="commentNumber20" class="commentEntry">
<p>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.

</div>
    <p class="posted"><a href="#commentNumber20">Comment</a> by

Vinicius Borriello on 03/25  at  10:44 AM

<div id="commentNumber21" class="commentEntry fg">
<p>@Vinicius Borriello:&nbsp; Thanks!&nbsp; By the way, line 24 may have been causing you trouble if you didn’t also have the pxToEm() function available.&nbsp; It’s a little script we developed to convert units from pixels to ems (and vice versa) when resizing components on a page, etc.&nbsp; More information here:&nbsp;

http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/

</div>
    <p class="posted"><a href="#commentNumber21">Comment</a> by

Maggie (Filament) on 03/27  at  10:52 AM

<div id="commentNumber22" class="commentEntry">
<p>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

</div>
    <p class="posted"><a href="#commentNumber22">Comment</a> by

Panagiotis on 03/30  at  03:56 AM

<div id="commentNumber23" class="commentEntry">
<p>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

</div>
    <p class="posted"><a href="#commentNumber23">Comment</a> by

Sam on 04/02  at  03:04 PM

<div id="commentNumber24" class="commentEntry">
<p>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 ...

</div>
    <p class="posted"><a href="#commentNumber24">Comment</a> by

benson on 04/12  at  10:28 PM

<div id="commentNumber25" class="commentEntry">
<p>I’ve used similar plugin long ago

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

it gives the same result.

</div>
    <p class="posted"><a href="#commentNumber25">Comment</a> by

Mahbub on 04/15  at  05:52 AM

<div id="commentNumber26" class="commentEntry">
<p>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

</div>
    <p class="posted"><a href="#commentNumber26">Comment</a> by

aloy on 05/18  at  08:46 AM

<div id="commentNumber27" class="commentEntry">
<p>Very useful..But i am still not clear about not using CSS ...

</div>
    <p class="posted"><a href="#commentNumber27">Comment</a> by

Richard on 05/21  at  06:07 AM

<div id="commentNumber28" class="commentEntry">
<p>Wow, this is awesome!

</div>
    <p class="posted"><a href="#commentNumber28">Comment</a> by

ArthasMX on 05/22  at  07:02 PM

<div id="commentNumber29" class="commentEntry">
<p>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!

</div>
    <p class="posted"><a href="#commentNumber29">Comment</a> by

Justin on 05/27  at  10:42 AM

<div id="commentNumber30" class="commentEntry">
<p>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.

</div>
    <p class="posted"><a href="#commentNumber30">Comment</a> by

Matt Wiebe on 05/27  at  11:11 AM

<div id="commentNumber31" class="commentEntry">
<p>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); });

</div>
    <p class="posted"><a href="#commentNumber31">Comment</a> by

Dan Woodroffe on 06/01  at  04:19 PM

<div id="commentNumber32" class="commentEntry">
<p>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

</div>
    <p class="posted"><a href="#commentNumber32">Comment</a> by

jubair on 06/02  at  04:03 PM

<div id="commentNumber33" class="commentEntry">
<p>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.

</div>
    <p class="posted"><a href="#commentNumber33">Comment</a> by

benxamin on 06/04  at  08:37 AM

<div id="commentNumber34" class="commentEntry">
<p>This is explained lucidly and it worth giving a try. And thanks for sharing the same!

</div>
    <p class="posted"><a href="#commentNumber34">Comment</a> by

Bell on 06/05  at  12:56 AM

<div id="commentNumber35" class="commentEntry">
<p>So this doesn’t seem to work for me.&nbsp; When I inspect in Firebug the two container heights are being set equally (which is good).&nbsp; 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);

</div>
    <p class="posted"><a href="#commentNumber35">Comment</a> by

Dylan MacDonald on 06/10  at  06:28 PM

<div id="commentNumber36" class="commentEntry">
<p>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 :(

</div>
    <p class="posted"><a href="#commentNumber36">Comment</a> by

Samuel Milton on 06/11  at  05:38 AM

<div id="commentNumber37" class="commentEntry">
<p>Nate, that’s a clever hack for handling columns withs images. thanks…

</div>
    <p class="posted"><a href="#commentNumber37">Comment</a> by

maheswaran krishnan on 06/21  at  08:22 PM

<div id="commentNumber38" class="commentEntry">
<p>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 !!!

</div>
    <p class="posted"><a href="#commentNumber38">Comment</a> by

adwin on 06/28  at  09:04 PM

<div id="commentNumber39" class="commentEntry">
<p>Thanks for sharing, looked long back today got a chance to use this! works exactly as required!! thanks again!! :)

</div>
    <p class="posted"><a href="#commentNumber39">Comment</a> by

Vipul Limbachiya on 07/07  at  07:22 AM

<div id="commentNumber40" class="commentEntry">
<p>Nice tutorial!

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

</div>
    <p class="posted"><a href="#commentNumber40">Comment</a> by

arquivo deslizante on 07/12  at  07:17 PM

<div id="commentNumber41" class="commentEntry">
<p>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.

</div>
    <p class="posted"><a href="#commentNumber41">Comment</a> by

gaus surahman on 07/14  at  02:34 AM

<div id="commentNumber42" class="commentEntry">
<p>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.

</div>
    <p class="posted"><a href="#commentNumber42">Comment</a> by

Benjamin on 08/05  at  10:37 PM

<div id="commentNumber43" class="commentEntry">
<p>Very Nice, Thank you for your sharing .

Cheers
Elijah

</div>
    <p class="posted"><a href="#commentNumber43">Comment</a> by

Dindigul on 08/25  at  06:01 AM

<div id="commentNumber44" class="commentEntry">
<p>displaying    “G.replace not a function”  error.&nbsp;

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

</div>
    <p class="posted"><a href="#commentNumber44">Comment</a> by

rvs on 09/23  at  11:45 AM

<div id="commentNumber45" class="commentEntry">
<p>提供下载吗?

</div>
    <p class="posted"><a href="#commentNumber45">Comment</a> by

lgh on 09/24  at  10:36 PM

<div id="commentNumber46" class="commentEntry">
<p><a href="http://www.fusionteam.co.uk/blog/2009/09/28/setting-equal-heights-using-jquery/" rel="nofollow">http://www.fusionteam.co.uk/blog/2009/09/28/setting-equal-heights-using-jquery/</a>

</div>
    <p class="posted"><a href="#commentNumber46">Comment</a> by

fusionteam on 09/28  at  03:22 AM

<div id="commentNumber47" class="commentEntry">
<p>The information provided is very useful to harness our skills further. This really provides a good understanding and simple explanation of the material.

</div>
    <p class="posted"><a href="#commentNumber47">Comment</a> by

Payday money on 10/05  at  05:22 AM

<div id="commentNumber48" class="commentEntry">
<p>biligiler cok iyi ya beendıms aolun

</div>
    <p class="posted"><a href="#commentNumber48">Comment</a> by

sikiş izle on 10/26  at  03:31 PM

<div id="commentNumber49" class="commentEntry">
<p>tanks for the information, its much usefull.&nbsp; i  will comment in my blog about your post.

tank you.

</div>
    <p class="posted"><a href="#commentNumber49">Comment</a> by

boutique arte angels on 11/14  at  04:08 AM

<div id="commentNumber50" class="commentEntry">
<p>vety nice taks admin

</div>
    <p class="posted"><a href="#commentNumber50">Comment</a> by

sikiş on 11/18  at  09:19 AM

<div id="commentNumber51" class="commentEntry">
<p>i use the same method but i fnd some throble with ie8 some body know any solution? (my tables don’t show).

</div>
    <p class="posted"><a href="#commentNumber51">Comment</a> by

criacao-sites on 11/22  at  01:29 PM

<div id="commentNumber52" class="commentEntry">
<p>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.

</div>
    <p class="posted"><a href="#commentNumber52">Comment</a> by

Amos on 11/25  at  04:36 PM

<div id="commentNumber53" class="commentEntry">
<p>hi, this solution that all i search some many time, tank you for your publication.

</div>
    <p class="posted"><a href="#commentNumber53">Comment</a> by

travel airfare hotel on 11/28  at  04:02 AM

<div id="commentNumber54" class="commentEntry">
<p>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.

</div>
    <p class="posted"><a href="#commentNumber54">Comment</a> by

Kcin on 12/02  at  07:05 AM

<div id="commentNumber55" class="commentEntry">
<p>After many try, I manage to do what I want.

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

Very simple :D

</div>
    <p class="posted"><a href="#commentNumber55">Comment</a> by

Kcin on 12/02  at  07:58 AM

<div id="commentNumber56" class="commentEntry">
<p>Great plugin! It works fine in Firefox and IE, but in Chrome it’s not working at all here

</div>
    <p class="posted"><a href="#commentNumber56">Comment</a> by

Jorre on 12/31  at  06:58 AM

<div id="commentNumber57" class="commentEntry">
<p>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

</div>
    <p class="posted"><a href="#commentNumber57">Comment</a> by

Amol on 01/01  at  11:59 PM

<div id="commentNumber58" class="commentEntry">
<p>Nice solution man, its so easy to do it when we use table

Thx for the script, ill definitely try it on my new project

Cheers

</div>
    <p class="posted"><a href="#commentNumber58">Comment</a> by

Rudi on 02/19  at  01:26 AM

<div id="commentNumber59" class="commentEntry">
<p>Nice solution man, its so easy to do it when we use table

Thx for the script, ill definitely try it on my new project

</div>
    <p class="posted"><a href="#commentNumber59">Comment</a> by

Sikis Hikayesi on 03/07  at  11:46 AM

<div id="commentNumber60" class="commentEntry">
<p>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.

</div>
    <p class="posted"><a href="#commentNumber60">Comment</a> by

Sikis Hikayeleri on 03/07  at  11:47 AM

<div id="commentNumber61" class="commentEntry">
<p>great text thanks admin.

</div>
    <p class="posted"><a href="#commentNumber61">Comment</a> by

sikis izle on 03/08  at  06:21 PM

<div id="commentNumber62" class="commentEntry">
<p>This promising script drove me bonkers until I read the comments about commenting out line 24, then it worked! Thanks. I would love to see this simple fix included in the intro of the script itself.

</div>
    <p class="posted"><a href="#commentNumber62">Comment</a> by

Frances Cherman on 03/08  at  07:12 PM

<div id="commentNumber63" class="commentEntry">
<p>not same view with print result

</div>
    <p class="posted"><a href="#commentNumber63">Comment</a> by

fathul wahhab on 03/24  at  03:50 AM

<div id="commentNumber64" class="commentEntry">
<p>hi I have got problem, This isnt work when cols is not in same container :(

</div>
    <p class="posted"><a href="#commentNumber64">Comment</a> by

Kostkac on 03/28  at  09:21 AM

<div id="commentNumber65" class="commentEntry fg">
<p>@Kostkac: yes, that’s a restriction due to how these functions are currently set up, but it wouldn’t be difficult to extend them with an option to equalize the heights of several unrelated elements. Patches are welcome! :)

</div>
    <p class="posted"><a href="#commentNumber65">Comment</a> by

Scott (Filament) on 03/30  at  09:45 AM

<div id="commentNumber66" class="commentEntry">
<p>Fantastic! Just what I was looking for. Fingers crossed that it’s going to work well with my sortable list :)

</div>
    <p class="posted"><a href="#commentNumber66">Comment</a> by

Ben on 03/31  at  07:17 PM

<div id="commentNumber67" class="commentEntry">
<p>You fucking beauty!!!

</div>
    <p class="posted"><a href="#commentNumber67">Comment</a> by

Darren on 04/14  at  10:54 AM

<div id="commentNumber68" class="commentEntry">
<p>Why not use tables? In this case it may be more elegant...?

</div>
    <p class="posted"><a href="#commentNumber68">Comment</a> by

Scott Kellum on 04/16  at  09:08 AM

<div id="commentNumber69" class="commentEntry">
<p>Very nice javascript solution for this well known “problem”.&nbsp; And it’s easy to implement. Thx for sharing!

</div>
    <p class="posted"><a href="#commentNumber69">Comment</a> by

CSS-Design on 04/27  at  10:18 AM

<div id="commentNumber70" class="commentEntry">
<p>I am not able to make this working - trying to make it work on <a href="http://fuva.eu" rel="nofollow">http://fuva.eu</a>

I put this:

baseurl ?>/templates/<?php echo $this->template?>/js/jQuery.equalHeights.js">


$(’.columns’).equalHeights();

into the head of html and attached class columns to desired colums and copied the script to correct place with name jQuery.equalHeights.js

Could you please tell me what Im doing wrong? Thanks

</div>
    <p class="posted"><a href="#commentNumber70">Comment</a> by

Vasik on 05/21  at  04:14 PM

<div id="commentNumber71" class="commentEntry">
<p>hey filament team,

first: very cool solution, exactly what i searched for. :) but i have one problem, it doesn’t work in the safari-browser (win & mac). is there a solution for this? thanks.

</div>
    <p class="posted"><a href="#commentNumber71">Comment</a> by

manuva on 06/11  at  12:08 PM

<div id="commentNumber72" class="commentEntry">
<p>thank you admin cik

</div>
    <p class="posted"><a href="#commentNumber72">Comment</a> by

sikiş on 06/28  at  05:18 PM

<div id="commentNumber73" class="commentEntry">
<p>There’s a logic error in `if (!px || !Number.prototype.pxToEm)` – that means “if the user did not set the px flag OR pxToEm does NOT exist, call pxToEm”, which causes a runtime error if pxToEm is not loaded, disregarding the px flag.

A more useful logic is `if (!px && Number.prototype.pxToEm)`, making the px flag decide what to use, and only call pxToEm if it exists.

</div>
    <p class="posted"><a href="#commentNumber73">Comment</a> by

Mikkel Høgh on 07/03  at  05:42 AM

<div id="commentNumber74" class="commentEntry">
<p>For those of us newbies.... you need to paste this script in your &lt;head&gt; section somewhere after the script

$(function(){ $(’#parentelement’).equalHeights(); });

The #parentelement id in this case is the parent element.

You’ll also need to link to jquery. Here’s a hotlink you can use. This also goes in your <head> section.

</div>
    <p class="posted"><a href="#commentNumber74">Comment</a> by

Briton on 10/05  at  10:05 PM

<div id="commentNumber75" class="commentEntry">
<p><a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" rel="nofollow">http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js</a>

</div>
    <p class="posted"><a href="#commentNumber75">Comment</a> by

Briton on 10/05  at  10:05 PM

<div id="commentNumber76" class="commentEntry">
<p>‘

$(function(){ $(’#contentarea’).equalHeights(); });

</div>
    <p class="posted"><a href="#commentNumber76">Comment</a> by

Briton on 10/05  at  10:06 PM

<div id="commentNumber77" class="commentEntry">
<p>oh forget it. It keeps stripping my tags

</div>
    <p class="posted"><a href="#commentNumber77">Comment</a> by

Briton on 10/05  at  10:06 PM

<div id="commentNumber78" class="commentEntry">
<p>I had to remove the conditional comparison on line 24, because of error “currentTallest.pxToEm is not a function”. I believe I followed all instructions to include the toEm() and toPx() jquery plugins, and loaded pxem.JQuery.js before it’s called by equalHeights.js.

`if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm();`

I also tried this, which produced the same error:

`if (!px || !Number.prototype.toEm) currentTallest = currentTallest.toEm();`

</div>
    <p class="posted"><a href="#commentNumber78">Comment</a> by

Opally on 11/11  at  11:26 AM

<div id="commentNumber79" class="commentEntry">
<p>Thank. Very usefull

</div>
    <p class="posted"><a href="#commentNumber79">Comment</a> by

webunique on 12/13  at  09:22 AM

<div id="commentNumber80" class="commentEntry">
<p>thanks adminzzz a ssiktir lann .

</div>
    <p class="posted"><a href="#commentNumber80">Comment</a> by

sikiş on 12/13  at  01:56 PM

<div id="commentNumber81" class="commentEntry">
<p>great work! I like it very much, wish you can possess a glance at my site.

</div>
    <p class="posted"><a href="#commentNumber81">Comment</a> by

Moncler on 01/03  at  09:31 PM

<div id="commentNumber82" class="commentEntry">
<p>thanx admin by points gol

</div>
    <p class="posted"><a href="#commentNumber82">Comment</a> by

escort on 01/20  at  04:30 AM

<div id="commentNumber83" class="commentEntry">
<p>Does anyone know why it adds an extra space at the bottom? It calculates the height but it gives me a higher height than the highest element.

Help?

</div>
    <p class="posted"><a href="#commentNumber83">Comment</a> by

CIPPO on 01/22  at  07:27 AM

<div id="commentNumber84" class="commentEntry">
<p>This site is very great and indispensable to my thank you to expect continued success with the authorities there are millions of people come easy memlunkalan but I guess I did not bring the language

</div>
    <p class="posted"><a href="#commentNumber84">Comment</a> by

eren on 01/31  at  03:21 PM

<div id="commentNumber85" class="commentEntry">
<p>This site is very beautiful and I had a really great site I would suggest you check in and thank this site has what i call

</div>
    <p class="posted"><a href="#commentNumber85">Comment</a> by

porno on 02/02  at  02:59 PM

<div id="commentNumber86" class="commentEntry">
<p>HI am from madurai… this is really super…

</div>
    <p class="posted"><a href="#commentNumber86">Comment</a> by

srini on 02/07  at  08:05 AM

<div id="commentNumber87" class="commentEntry">
<p>This site is very beautiful and I had a really great site I would suggest you check in and thank this site. good admins

</div>
    <p class="posted"><a href="#commentNumber87">Comment</a> by

hosting on 02/08  at  12:28 PM

<div id="commentNumber88" class="commentEntry">
<p>Thanks admin.Very

</div>
    <p class="posted"><a href="#commentNumber88">Comment</a> by

epoksi on 02/18  at  07:27 PM

<div id="commentNumber89" class="commentEntry">
<p>Very Me See.Good

</div>
    <p class="posted"><a href="#commentNumber89">Comment</a> by

gelinlik on 02/18  at  07:28 PM

<div id="commentNumber90" class="commentEntry">
<p>Me Good Yes.Feed

</div>
    <p class="posted"><a href="#commentNumber90">Comment</a> by

gelinlik modelleri on 02/18  at  07:28 PM

<div id="commentNumber91" class="commentEntry">
<p>See Muching Good.

</div>
    <p class="posted"><a href="#commentNumber91">Comment</a> by

gelinlik fiyatları on 02/18  at  07:29 PM

<div id="commentNumber92" class="commentEntry">
<p>Very Me Soory.

</div>
    <p class="posted"><a href="#commentNumber92">Comment</a> by

tesettür gelinlik on 02/18  at  07:34 PM

<div id="commentNumber93" class="commentEntry">
<p>Thank you for the article. Can I share that article on my website? If you allow, please contact with me via my email address.

</div>
    <p class="posted"><a href="#commentNumber93">Comment</a> by

hostgator on 03/03  at  02:19 PM

<div id="commentNumber94" class="commentEntry">
<p>Actually found this to be more efficient :)


/**
* jQuery Plugin Function
*
* Make all elements same height according to “tallest” one found :)
* Original code : http://codesnipp.it/code/441
*/
jQuery.fn.equalHeights = function() {
return this.height(Math.max.apply(null,
this.map(function() {
return jQuery(this).height()
}).get()
));
};

Your welcome ;)

</div>
    <p class="posted"><a href="#commentNumber94">Comment</a> by

John Clarke on 03/08  at  03:09 PM

<div id="commentNumber95" class="commentEntry">
<p>Try this one ;)

http://aamirafridi.com/jquery/jquery-equal-columns-height-plugin

</div>
    <p class="posted"><a href="#commentNumber95">Comment</a> by

Aamir Afridi on 03/17  at  11:44 AM

<div id="commentNumber96" class="commentEntry">
<p>thank mank yonk vru silipilii

</div>
    <p class="posted"><a href="#commentNumber96">Comment</a> by

sikiş on 04/05  at  07:22 PM

<div id="commentNumber97" class="commentEntry">
<p>The plugin is not compatible when used with other javascript frameworks. For e.g. Prototype. Please use

(function($){
.....................................
.....................................
.....................................
})(jQuery);

inside your plugin file. i.e. jQuery.equalHeights.js in order to use it with the : jQuery.noConflict();

</div>
    <p class="posted"><a href="#commentNumber97">Comment</a> by

Binod Kumar Luitel on 04/08  at  05:06 AM

<div id="commentNumber98" class="commentEntry">
<p>Is there any way of getting this to exclude elements from the resizing? I’m using it to match the height of DIVs but would really love if it could be set to exclude contained paragraph elements!

Many thanks for this brilliant tool!

</div>
    <p class="posted"><a href="#commentNumber98">Comment</a> by

mm on 04/25  at  11:19 AM

<div id="commentNumber99" class="commentEntry">
<p>Hello Filament Group,

I have been using your equal heights plugin in my various projects but today while I was using it @ one of my Magento’s project I stumble upon a problem. The equal height plugin is not getting applied to the not visible element. I even use the :hidden selector but of no use. Can you please guide me what is the problem.

Thanx

</div>
    <p class="posted"><a href="#commentNumber99">Comment</a> by

Binod Kumar Luitel on 04/28  at  05:23 AM