The EqualHeights jQuery Plugin

After I wrote and published my last article on writing a function to equalize heights in jQuery, I realized that the function would probably make a really useful jQuery plugin. This is that plugin.

This is also my first attempt at a jQuery plugin, so I apologize in advance if I’ve done something painfully stupid (and painfully obvious) to any and all plugin veterans out there. Luckily, the functionality is extremely simple.

You can download the plugin here (right-click and save the link).

You can see a demo of the plugin here.

The plugin’s functionality is so simple because it’s designed to do only one thing: set all elements you specify to the same height.

This plugin is slightly more sophisticated than the function I wrote earlier this week. Instead of being stuck setting all your columns to the height of the tallest element, you can also (optionally) specify a minimum and maximum height you want the element to be.

For example:

$(".columns").equalHeights(100,300);

This would set all your elements to be at least 100px tall, but no more than 300px tall. If your tallest elements contain more than 300px worth of content, the containing element will still be resized, and a scroll bar will appear on the side of the element. If you only specify one number, that number will be treated like the minimum height, meaning all elements will be at least that number of pixels tall.

You can also nestle the function inside of a chain, to keep your code minimalistic:

$(".columns").equalHeights().css("color","blue");

Detailed Usage

For those not familiar with using jQuery plugins, here’s what you need to know.

  1. Load the jQuery library in your document’s head. That’ll look something like this:
  2. <script language="javascript" type="text/javascript" src="jquery.js"></script>
  3. Load the equalHeights plugin the same way. Be sure the plugin comes after (i.e., below) the main jQuery script… the function relies on jQuery already being loaded:
    <script language="javascript" type="text/javascript" src="jquery.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.equalheights.js"></script>
  4. In order for the function to be able to calculate heights accurately, you’ll need to make sure it waits until the page is done loading before running. So wrap the function call (just like you should most all of your jQuery functions) in a $(docment).ready() function, like so:
    $(document).ready(function() {
    	$(".columns").equalHeights(100,300);
    });

And that’s about all there is to it!

Known Limitations

  • Sometimes this script has trouble accurately calculating heights in Internet Explorer if you’re trying to find the height of an element that contains images that don’t have heights set. Unless the height has been specified, the script seems to assume a height of zero.
  • If you resize the text in your browser window, the blocks will not resize automatically. In some browsers, you would be able to fix this by calling the script again on resize, with something like:
    $(".columns").resize(function(){
     	$(".columns").equalHeights();
    });

    However, I’m given to understand that this doesn’t work on Firefox, as the browser doesn’t report text resizes as a “real” resize. I’m currently not aware of a good workaround.

Worth Mentioning

I should point out that there is a similar jQuery plugin out there already called equalHeight which has similar functionality. However, that plugin requires significantly more code and the author warns that it doesn’t work in Internet Explorer. I feel my contribution, which is very small and cross-browser compatible, is thus still worthwhile.

Further, CSS Newbie reader Jared Mellentine posted a similar jQuery function in the comments of the previous Equal Heights article. His functionality is slightly different than mine (his looks specifically for child elements, whereas mine assumes you’re specifying the elements you want to resize directly), but he did give me the idea of adding additional functionality to my plugin. So thanks, Jared!

53 Comments

  1. Bryce said:

    If only you had released this last week, you would’ve saved me a lot of heartache! Thankyou so much!

  2. CircleReader said:

    Thanks for this code, Rob. Your demo seems to be working just fine in FF3.1b2!

  3. Crealup said:

    If I have the experience to do the same thing using jQuery dimensions, give me one good reason why this is a better solution :)

  4. Marina said:

    This is great. I found it by chance today that I was thinking how to go about solving this problem. Many thanks!
    I had to change the scroll to visible though because for some reason when I set it to ‘make them all however the biggest box is’, the biggest box get a scrollbar.

  5. Sérgio Jardim said:

    This is a nice plugin! Thanks a lot!
    Cheers from Brazil.

  6. andi said:

    great, thanks. this is really useful.

  7. Rob Glazebrook said:

    Thanks for all the great responses, all. :)

  8. pSinke said:

    Awesome, this will be very useful in this project I’m about to start on. Thanks a bunch.

  9. AlexD said:

    Hello.

    I have tried to use it, but since i am new to the Jquery thing how do i specify exactly WHICH element to equalize, for example if i have 5 boxes but only want 4 of them to be equlized/changed sizes/etc how can i do with this piece of Jquery code you wrote.

    PS: i was using something very similar to this thing via normal javascript wihtout any libraries but it’s a lot longer given the fact that you have to type document.getElementById a lot of times.

    Thanks, hope you’ll answer.

  10. Rob Glazebrook said:

    Hi Alex,

    What you need to do is give the four boxes you want to equalize the same class, and then apply the equalHeights function to just that class. So if you gave those for boxes a class of “resizeme”, your code would look something like this:

    $(“.resizeme”).equalHeights();

    Does that help? If you’re new to the idea of CSS classes, you can learn more about them here.

  11. Alexandru Dinulescu said:

    Hello.

    Thank you for your answer Rob, i have been doing webdevelopment for a couple of years but only now i am starting to get into the realm of JS. Your explanation was very clear and i appreciate you taking the time to respond.

    Best wishes.

  12. Olivier G. said:

    “If you resize the text in your browser window, the blocks will not resize automatically.” : it will if you use min-height instead of height (exept for IE) (but heights between blocks will become different).

  13. malsup said:

    Rob,
    You’re missing the ‘var’ keyword when declaring the ‘tallest’ variable. Other than that – looks good!

  14. Eugene Kulikov said:

    However, I’m given to understand that this doesn’t work on Firefox, as the browser doesn’t report text resizes as a “real” resize. I’m currently not aware of a good workaround.

    Hello. Here’s the solution for text resize detection in A list apart article.

  15. krish said:

    Hi Rob
    This is great. I wonder how to make two columns of different width – for instance right col 600px width and left col width 120px – using this jqery plugin script. Can you help me please.
    Thank you
    Krish

  16. Rob Glazebrook said:

    Hi Krish,

    You would just use CSS to make the two columns different size. I would suggest giving the two columns different IDs, but the same class. For example:

    <div id=”col1″ class=”column”></div>
    <div id=”col2″ class=”column”></div>

    That way you can still use jQuery to find your “column” class, but can make them look different according to their IDs.

  17. Dave said:

    To trigger resize in Firefox, try something like this:

    $(window).resize(function(){
    $(“.columns”).trigger(“resize”);
    });

    Or you could call .equalHeights() from there directly.

  18. Paul Irish said:

    I wrote this and it does the job in most cases:

    $.fn.setAllToMaxHeight = function(){
    return this.height( Math.max.apply(this, $.map( this , function(e){ return $(e).height() }) ) )

    }

  19. mark sanders said:

    Hmm….i’m currently seeing scrollbars (vertical and horizontal) in IE6.
    they only disappear when I change the plugin so that overflow is hidden.

  20. Rob Glazebrook said:

    Hi Mark, I’ve noticed that can sometimes happen in IE if the columns contain images that don’t have a specified width and height set. In most browsers, jQuery ends up receiving the computed height of the image. For some reason, however, IE doesn’t seem to send a computed height, but instead sends a height of zero… which results in shorter than necessary columns and therefore scrollbars.

    My recommendation on this is to set the height of images whenever possible to avoid this problem.

  21. Jamie Krug said:

    @Rob, thanks a bunch for this, very handy! Unfortunately my first implementation caused a vertical scrollbar to show up in Firefox (but fine in IE6/IE7). Who knows which CSS rule or quirk or whatever is causing this. I have height and width set on all images. Possibly related to relative font-size (em)? Anyway, I figured the quick fix for a non-JavaScript/CSS-guru such as myself is to simply set the overflow attribute to “visible” instead of auto (as you have it in your script). Or, I thought maybe just a couple pixels extra to the equalized height. So, here’s the revision of your script that I’m now using with success…

    /**
    * Revision: 1/14/2009, Jamie Krug
    * Changed signature to accept one optional argument (options) as an associative array to better support more optional “arguments” in a more readable fashion.
    * Added overflow option, to override default CSS declaration.
    * Added addToHeight option, to optionally pad tallest height (can be used as a quick fix in quirky situations where a couple extra pixels will avoid overflow).
    *
    * Example 1: $(“.cols”).equalHeights();
    * Example 2: $(“.cols”).equalHeights( { minHeight: 400 } );
    * Example 3: $(“.cols”).equalHeights( { minHeight: 100, maxHeight: 300 } );
    * Example 4: $(“.cols”).equalHeights( { overflow: ‘visible’ } );
    * Example 5: $(“.cols”).equalHeights( { addToHeight: 3 } );
    *
    */

    (function($) {
    $.fn.equalHeights = function(optionsArg) {
    var options = { minHeight: 0, overflow: ‘auto’, addToHeight: 0 };
    for (var n in arguments[0]) { options[n] = arguments[0][n]; }
    var tallest = options.minHeight;
    this.each(function() {
    if($(this).height() > tallest) {
    tallest = $(this).height();
    }
    });
    if((options.maxHeight) && tallest > options.maxHeight) tallest = options.maxHeight;
    tallest = tallest + options.addToHeight;
    return this.each(function() {
    $(this).height(tallest).css(“overflow”,options.overflow);
    });
    }
    })(jQuery);

  22. Patrick Elward said:

    So far, this thing ROCKS! I love it. I’m new to jquery and tried to combine your code with another jquery plug in, and am having some issues with it.

    You can see it here: http://www.awbworld.com/rounded3.php

    On IE, it fails to ‘move’ the border to the bottom.
    on FF, it looks fine.

    Any thoughts?
    The source for rounded corners is here:
    http://malsup.com/jquery/corner/

  23. Billy Gray said:

    Cool plugin, dude, thanks ;-)

  24. Natalie said:

    Hi Rob, I’ve made a Drupal module with your plugin. Do you mind if I publish it?

  25. Natalie said:

    Hi Rob, thanks, of course I mentioned you and your site in the module docs.

  26. Paul said:

    Rob,

    I’m a newbie building a web site based on Dave Woods CSS Fixed Footer,http://www.dave-woods.co.uk/index.php/css-fixed-footer/ . When I apply your equal height plug-in the content, if longer than the page, rides up over the top of the footer, instead of behind it. Is there a way to fix that?

    Thanks

  27. On March 03, 2009
    5:41AM

    Oliv G. said:

    A little improvment of your plugin that supports the padding and border sizes…

    (function($) {
    $.fn.equalHeights = function(minHeight, maxHeight) {
    var tallest = (minHeight) ? minHeight : 0;
    function addSize(elem,baseHeight,operation) {
    var border_top = parseInt(elem.css(‘border-top-width’));
    var border_bottom = parseInt(elem.css(‘border-bottom-width’));
    var padding_top = parseInt(elem.css(‘padding-top’));
    var padding_bottom = parseInt(elem.css(‘padding-bottom’));
    if (operation == ’subtract’) {
    if (!isNaN(padding_top)) baseHeight -= padding_top;
    if (!isNaN(padding_bottom)) baseHeight -= padding_bottom;
    if (!isNaN(border_top)) baseHeight -= border_top;
    if (!isNaN(border_bottom)) baseHeight -= border_bottom;
    } else {
    if (!isNaN(padding_top)) baseHeight += padding_top;
    if (!isNaN(padding_bottom)) baseHeight += padding_bottom;
    if (!isNaN(border_top)) baseHeight += border_top;
    if (!isNaN(border_bottom)) baseHeight += border_bottom;
    }
    return baseHeight;
    }
    this.each(function() {
    var height = $(this).height();
    height = addSize($(this),height);
    if (height > tallest) tallest = height;
    });
    if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
    return this.each(function() {
    tallest2 = addSize($(this),tallest,’subtract’)
    $(this).height(tallest2);
    });
    }
    })(jQuery);

  28. On March 30, 2009
    9:20AM

    Aaron said:

    I’m trying to use this with the jQuery UI themes and can’t seem to get around the IEx v6 problem of the containers including images with undefined heights.

    My goal is to display text of an unknown length in buttons and to have all buttons in a given row have equal heights. Therefore the height of the images is unknown ahead of time. Any suggestions? Perhaps something in this plugin to define the height of the images?

  29. On March 30, 2009
    10:26AM

    Rob Glazebrook said:

    Hi Aaron,

    I believe you can get around this problem by using $(window).onload() instead of $(document).ready(). Using document.ready results in your columns being set more quickly — but it runs before all of your images have been downloaded. By contrast, window.onload doesn’t fire until everything — including your images — is downloaded.

    The downside is you’ll have a second or two of unequal columns before the script fires. The upside is, your columns should work well, even in IE.

  30. On April 20, 2009
    9:37AM

    Tim said:

    I use this plugin on a page where most of the pages content is loaded using ajax. Of course when I loaded data dynamically my columns wouldn’t resize, as is expected.

    To fix this, you would think you would just call .equalHeights() whenever you added or removed data. However this doesn’t work, the reason being that the plugin sets the height of the elements on the first run and calling it again it uses these set heights to recalculate the values (at least in firefox, never tested IE).

    To get around this I just do .height(‘auto’).equalHeights().

  31. On April 20, 2009
    11:30AM

    Rob Glazebrook said:

    This is a great tip, Tim. Thanks for sharing!

  32. On May 07, 2009
    4:58PM

    Matthew said:

    Thanks, works in Fx and IE7. Fixed two separate sets of columns in minutes! Would have hated to use a table… Thanks again!

  33. On May 26, 2009
    4:34PM

    Jeremy said:

    I have a problem that needs a solution very similar to this plugin, but with a twist. The site design is using a 3-column, variable-width layout. That was difficult enough to make work properly, but the downfall with how we made it work was that we can’t clear floats in the content column (see site here: http://knowledgenetwork.thunderbird.edu/tpec/?theme=Thunderbird+3). If we clear:left, it causes the content below the clear to jump down below the bottom of the left column, and same thing with clearing right columns. So the problem is that we need each post summary to have a min-height of the image that is left aligned, so that the following post summary isn’t wrapped around the image as well. This plugin would make all post summaries the height of the tallest one (or require specifying a min-height, which is never known, since it is dependent on the posts being displayed on the images included in those posts). It would be ideal if this plugin could be slightly modified so that each element to be resized could simply look at the image size specified in the element and make that the min-height the same. That way each element could have a different min-height specified, according to it’s own content. All it would basically do is mimic what a clear:both would do (if only we could use clears!).

  34. On June 16, 2009
    3:06AM

    maxpabby said:

    is there a way to implement this with columns that have different classes

  35. On June 16, 2009
    3:16AM

    maxpabby said:

    also my columns are nest in a div(cont2) which is in another div(cont1) and I want the columns to take the background colour of “cont2″ keeping in mind that the body background colour is different for both divs

    sorry for the complexity but that’s where I find myself

  36. On June 16, 2009
    4:53AM

    maxpabby said:

    found the answers seems i should have taken my j-script-query serious however am thinking, what if i have two groups of columns that needs to be of equal height differently.

    let say i have div 1&2 which needs to be of the same height with a min height of say 100 and 3&4 which also need to be of thief own height with a min height of say 150

    can i implement such with the current plug-in

  37. On June 16, 2009
    10:41AM

    Rob Glazebrook said:

    Hi Maxpabby,

    If you have two distinct groups, then the plugin works fine… you just have to run it twice. So you would have something that looks like this:

    $(“.group1″).equalHeights();
    $(“.group2″).equalHeights();

    Or, if you don’t have classes set up for your divs, you can group them in your jQuery like so:

    $(“#div1, #div2″).equalHeights();
    $(“#div3, #div4″).equalHeights();

    Hope that helps!

  38. On June 16, 2009
    4:09PM

    maxpabby said:

    thanx rob u are the best

    i just thought it would be nice to be able to style the scrollbars i found a plug-in for it but its too long

    anyway for those having problems with the scrollbar i discovered that that setting the div’s overflow to “scroll” hides the bars and makes them appear only when the content changes dynamically

  39. Anwar Javed said:

    I think instead of setting height we should use min-height to allow columns to resize automatically.

    (function($) {
    $.fn.equalHeights = function(minHeight, maxHeight) {
    tallest = (minHeight) ? minHeight : 0;
    this.each(function() {
    if($(this).height() > tallest) {
    tallest = $(this).height();
    }
    });
    if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
    return this.each(function() {
    if ($.browser.msie && $.browser.version == 6.0) { $(this).height(tallest); }
    $(this).css(“min-height”, tallest + “px”).css(“overflow”, “auto”);
    });
    }
    })(jQuery);

  40. Anwar Javed said:

    Also Setting overflo auto shows scrollbar in IE.

    (function($) {
    $.fn.equalHeights = function(minHeight, maxHeight) {
    tallest = (minHeight) ? minHeight : 0;
    this.each(function() {
    if($(this).height() > tallest) {
    tallest = $(this).height();
    }
    });
    if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
    return this.each(function() {
    if ($.browser.msie && $.browser.version == 6.0) { $(this).height(tallest); }
    $(this).css(”min-height”, tallest + “px”);
    });
    }
    })(jQuery);

  41. Rob Glazebrook said:

    Hi Anwar,

    There are a few problems with using min-height. First is that Internet Explorer (at least through version 7, I haven’t tested 8) doesn’t support it. So while min-height would work in other browsers, it would fail completely in IE, rendering the plugin useless with the majority of web users. And yes, you can get around that by setting height for IE and min-height for the others, but I was shooting for consistency. :)

    The other problem is, the whole idea behind this plugin is to get elements of the exact same height. Using the height property assures this. Using min-height does not: any element could stretch beyond its minimum height, becoming taller than the others and potentially ruining a layout that was dependent on equal heights.

  42. Olivier G. said:

    @Anwar @Rob : I also tend to prefer to use min-height rather than pure height for such designs, but there are some curious rendering issues with firefox 3 using this method. I often have to add 1px to the min-height to prevent rendering bugs like the browser thinking that one of the elements his higher than he is, and so creating a “hole” in the design.

  43. Jim said:

    Hi Rob,

    I’m using your plugin, but I ran into a problem. My page ahs a two column layout. The left has some plain text, and the right has a form inside. This form includes a radio button that controls the visibility of a part of the form. When the radio button says not to show a hidden part of the form, there is still whitespace below the page. When a click the radiobutton to show the hidden part of the form, then the whitespace is filled with the rest of the form.
    I think your equalheights plugin can’t handle the hidden part of the form properly, because there is whitespace at the bottom of the page ‘as room’ for the hidden fields of the form. I would like that when the part of the form is hidden, than the extra whitespace should not be there.

    I hope you can help me with this. Thanks!

  44. On August 11, 2009
    12:52PM

    Olivier G. said:

    @Jim : I think that you just have to apply again the plugin in you show/hide function on the two columns.

  45. joe zielinski said:

    I’m having issues with this working in Safari 3. Any Ideas?

  46. lenny aspen said:

    thanks Rob that`s a nice solution
    the best so far

    anyway on opera i replaced this line:
    $(this).height(tallest).css(“overflow”,”auto”);
    with this line
    $(this).height(tallest).css(“overflow”,”hidden”);
    so the right scrolling bar wont show

  47. Sara said:

    Rob –
    Thanks for this great solution!

    However, I’ve run into a glitch I can’t seem to resolve. The resize appears to be running fine, but it’s resizing SMALLER than the tallest box.

    Here’s an example of what I’m talking about:
    http://workbench.deliverframework.net:8006/myron/?No=12&D=notepads&Ntt=notepads&Nao=12&Di=1000&Dk=0&N=0&Nty=1

    I am trying to resize the “prod-info” class that contains the description of various products so that my pricing grids and buy buttons will all be equally aligned on this search page. The Regatta Burgundy & Black Compac® Diary description is clearly the longest on the page, but the pricing grid is being pushed into the text in Firefox, and in IE, it just forces the Buy button lower and displays mis-aligned.

    I tried the fix of .height(‘auto’).equalHeights(), but that didn’t seem to help. Adding the resize function seems to fix the overlapping text issue in Firefox, but that still leaves the buy button mis-aligned.

    Any thoughts/suggestions would be greatly appreciated! We’re hoping to launch this on Tuesday!

    Thanks!
    Sara

    PS – Congratulations on your marriage!

  48. Sara said:

    An addendum to my original comment. It’s this line in the Javascript that causes the problem:
    $(this).height(tallest).css(“overflow”,”visible”);

    When set to “auto” it works fine, but displays a scrollbar (in IE and Firefox)
    When set to “visible” I have that word wrap issue.
    When set to “hidden” the box still doesn’t stretch correctly, but at least the text is hidden.

    As a potential fix I’ve set the Javascript to overflow hidden, and defined a minimum height of 55px, but I wish there was a better solution…

    Thanks again!

  49. Jason Bartholme said:

    Thank you for the plugin! I was pulling my hair out trying to get a Grid960 layout to get equal columns. I will be using this script in the future.

  50. Julien said:

    Great plugin, thank you !

  51. Custom WordPress themes said:

    I can say, “I know jquery!”. Why? Because of the contribution of people like you. Thanks.
    I should say, “I know how to use jquery!”.

  52. naruto said:

    Thank so much for your supports.

  53. Marjorie said:

    Hi Rob –

    Love the plugin. However I’ve got a small problem. The plugin doesn’t seem to work with the jQuery.js version that my website uses (v1.3.2). Doesn’t work with the latest version either (v1.4.1).

    I’ve tested it with the version that your website uses (v1.2.6) and it works fine.

    However, will this break my website if I load 2 separate versions of jQuery.js in the section? My website runs Wordpress 2.9.1.

    As you can guess, I know nothing about jquery/javascript. Hope you can clear my confusion and concerns.

    Thanks in advance.

23 Responses Elsewhere

  1. robert haverly » Equal Column Heights With jQuery said:

    [...] Get it. It has a permanent place in my resources folder. [...]

  2. links for 2008-12-11 « Minesa IT said:

    [...] The EqualHeights jQuery Plugin (tags: plugin jquery javascript) [...]

  3. rascunho » Blog Archive » links for 2008-12-11 said:

    [...] The EqualHeights jQuery Plugin After I wrote and published my last article on writing a function to equalize heights in jQuery, I realized that the function would probably make a really useful jQuery plugin. This is that plugin. (tags: http://www.cssnewbie.com 2008 mes11 dia11 jQuery plugin article) [...]

  4. OUVYT » Blog Archive » Daily Del.icio.us said:

    [...] The EqualHeights jQuery Plugin [...]

  5.   Same height elements with EqualHeights - jQuery Plugin by W3Planting said:

    [...] EqualHeights is a simple and easy to use jQuery Plugin, which do a simple task of making equal height of all the elements you specify. [...]

  6. JeremiahTolbert.com » Blog Archive » links for 2008-12-14 said:

    [...] The EqualHeights jQuery Plugin (tags: webdevelopment webdesign jquery javascript) [...]

  7. Useful Links (15/12/2008) | Apramana said:

    [...] The EqualHeights jQuery Plugin [...]

  8. Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster? said:

    [...] The EqualHeights jQuery Plugin Make those heights equal! (tags: design article plugin Plugins webdesign javascript web development layout resource Web_Design scripts webdevelopment columns webdev tutorial list jQuery CSS 2008 div float equalheights equalheight equal height) [...]

  9. Enaka višina stolpcev z jQuery « 5days.net uradni blog said:

    [...] sem danes naletel na zelo simpatično in enostavno rešitev s pomočjo jQuery vtičnika “EqualHeights“. Ta trenutek vtičnik še ni dosegljiv preko jQuery baze vtičnikov in je dosegljiv samo na [...]

  10. Jorge Yau » links for 2009-01-03 - Diseñador Web said:

    [...] The EqualHeights jQuery Plugin (tags: webdesign jquery javascript plugins tutorial webdev scripts resource webdevelopment) [...]

  11. Tinggi elemen yang seragam dengan EqualHeights jQuery Plugin | display:inline said:

    [...] EqualHeights adalah sebuah jQuery plugin yang bisa digunakan untuk membuat semua element dengan class tertentu memiliki tinggi yang sama. Contoh hasil dengan Equal Height [...]

  12. Calgary Web Design | Urbanetics Web Design said:

    [...] 4) Use JavaScript.I generally avoid JavaScript for anything layout-related, but if you aren’t worried about that, you could possibly use JavaScript to set equal heights. JavaScript has the power to measure elements, compare and perform calculations and all that other magic necessary to get the job done. Take a look at this jQuery plug-in. [...]

  13. http://www.digiwu.com » Blog Archive » Ask SM [CSS/JS]: Divs of Equal Height, Dealing with IE 6 said:

    [...] 4) Use JavaScript.I generally avoid JavaScript for anything layout-related, but if you aren’t worried about that, you could possibly use JavaScript to set equal heights. JavaScript has the power to measure elements, compare and perform calculations and all that other magic necessary to get the job done. Take a look at this jQuery plug-in. [...]

  14. stign.no | Floating boxes with equal heights said:

    [...] to the authors homepage for further [...]

  15. On May 07, 2009
    7:32PM

    Advanced jQuery Tabbed Box Techniques « Internet Turnkey Websites said:

    [...] to calculate and apply height in jQuery, the fastest and easiest means to our end would be to use the equalHeights jQuery plugin I developed and wrote about recently. By using that plugin, we’d only have to make a single addition to the “document ready” [...]

  16. Equal Height Columns with jQuery said:

    [...] This concept has been adapted into a full-fledged jQuery plugin. Check it out here. And then read on to learn how this technique is [...]

  17. Best of 2009 – JavaScript | JavaScript | prowordpress.org said:

    [...] The EqualHeights jQuery Plugin “Creating equal-height columns with CSS is sometimes a bear. But who needs the hassle of faux columns, “clear” divs and the rest? With this bit of jQuery, you can easily equalize the heights of any group of elements.” [...]

Leave a Comment