The EqualHeights jQuery Plugin

Published December 10, 2008 by Rob Glazebrook.

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:

1

$(".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:

1

$(".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. 1

    <script language="javascript" type="text/javascript" src="jquery.js"></script>
  2. 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: 
    1
2

    <script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.equalheights.js"></script>
  3. 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: 
    1
2
3

    $(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: 
    1
2
3

    $(".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!

146 Responses

  2. Alastair

    Hi,

    One thing I discovered is a bug with Safari and Chrome on Mac OS X, where the height() method can return an incorrect value until more of the page layout is complete. It meant my columns were being set too high. The workaround was to put the call in the $(window)load() function rather that $(document).ready().

    cheers,
    Alastair

  3. Kyle Skrinak

    Great plugin, much thanks! I am seeing what Alastair notes, however, for me it isn’t related to a full page rendering. Rather, webkit doesn’t add image height, and thus pages will be short where image height impacts parent height. My fix is kludgy, (adding a div to these pages with a conditional stylesheet that adds necessary height to WebKit browsers) but I’ll be watching to see for more elegant solutions. Thanks!

  4. Gavin McFarland

    How would I get the columns to expand to the height of the container div only?

    Currently I’m using this on a blog to set the height of date, author tags etc in my posts, but the problem is it’s setting every post that has a date, author and category column to have the same height regardless of it’s content. So for example one post may have a list of 5 categories where as another might only have 1, however the post with 1 category has the same height as the one with 5 categories. Is there a way to get the height to expand to the tallest element of content without having to specify each post individually?

    Thanks. :)

  5. Lucien

    Any ideas why it would disable a z-index style I was using on the content of the now equal height divs. The equal heights works great btw.

  10. gavsiu

    is it possible to only have equal heights if the elements are floating? because im using media queries, when the browser window resizes to a certain size, i will be turning off float and i dont want my list elements to have extra space when they are not side by side..

  13. Yerlan

    Hey Rob!

    Thanks! Very useful plugin! But still have some issues:

    While one of my columns contatins vertical dropdown menu it’s nested UL is being clipped. Changing overflow from auto to visible seems to sovle problem, but I don’t know yet how it will affect plugin efficiency for other columns while using it multiple times.

    Is there any other way to overcome this issue without making changes into JS file?

    Thanks,
    Yerlan.

  14. Olivier G.

    @Yerlan : I think you can remove the overflow without much damage, it is usefull mostly for AJAX loaded content or user text resizing, and on my opinion it should not be enable by default.

    But I do not see any other way to handle your issue.

    That said, I wonder why you have a dropdown menu in one of your colomns. I think you are not using the most usefull “equal heights” technique in your case.

  15. gavsiu

    i solved it a while ago.. my solution is

    var $columns = $(‘.two-column li’);
    var $columns_float = $columns.css(‘float’) != ‘none’;
    $columns.filter(function(index) {
    return $columns_float;
    }).equalHeights();
    $(window).resize(function () {
    $columns.filter(function(index) {
    if ($columns_float) {
    $columns.equalHeights();
    }
    else {
    $columns.height(‘auto’);
    }
    });
    });

  17. Sean

    Thanks to the clue given by Tim, here’s how I got it to recalculate after a window resize. First call it normally:

    $(document).ready(function() {
    $(‘.left-sidebar, .right-sidebar, #content’).equalHeights();
    });

    Then include this to handle resizing:

    $(window).resize(function() {
    $(‘.left-sidebar, .right-sidebar, #content’).height(‘auto’).equalHeights();
    })

  19. Clinton Green

    Hi, thanks for the plugin it really does help but I did encounter a bug in Webkit browsers where it only reads the first value (min-height) and uses it for actual height. Do you think this is a browser bug or can it be addressed in your code? Thanks

  20. how to lick a pussy

    In the long run investment decision the particular persons will be a reduced amount of troubled by temporary volatility. The marketplace does handle most of elements which maintain switching for the forseeable future. Thus anyone involved in lasting purchase or trading won’t be affected all the by cash advance instability because of components including liquidity, pretty of any unique market and also stock which might make the price tag on some sort of investment over or maybe undervalued.

  22. Antonio

    Thanks very much. It’s perfect if you are using some CSS framework (Grid960 in my case).

    Regards.

  23. Steven

    Hi Ive implemented your plugin, however, I cannot set a minimum and maximum height.

    In other words when I use this code:
    $(“.block”).equalHeights(100,300);
    It doesnt work, it sets the height to 234px

    When I use this code:
    $(“.block”).equalHeights(300);
    It works and sets the height to 300px

    When I dont enter an amount it just returns 234px

    I have no idea where 234px comes from (this is not the height of the .block class in my css either)

    Any idea how I can get the min and max height working this is a really useful plugin if I could just get it to work on my site.

  24. hidethesilver

    Absolutely positioned elements with negative values (tooltips for instance) inside the columns end up forcing a scroll effect — changing

    $(this).height(tallest).css(“overflow”,”auto”);

    to

    $(this).height(tallest).css(“overflow”,”visible”);

    corrects the behavior.

  25. Jack

    I just have one thing to say….. I love you… will you marry me haha, hours of pissing around with the other css alternatives that suck ass then I come across this and it just works perfect.

    I’m just starting to pick up javascript but hopefully it doesnt take long with my experience in php.

    Thanks bud

  27. Justin Little

    A fix for all browsers is to us the code below inside your document.ready. This waits until everything on the page is loading then triggers the call. It’s been tested in ie7+, firefox, safari, google+ and opera.

    $(window).load(function() {
    $(‘.equal’).equalHeights();
    });

  28. Pingback: jQuery UI Tabs – Automatic Height | Easy jQuery | Free Popular Tips Tricks Plugins API Javascript and Themes

  30. Von Ferrer

    Great Plugin! it works almost perfect, i have some problem when some that will expand when you click like accordion menu.. it doesnt expand the column rather it creates a scroll bar.. any idea on how to solve this? thanks in advance

  32. Jeroen

    I think I solved the known limitation that the height isn’t calculated accurately. Add the following code just before })(jQuery);

    $(”).insertAfter(‘#content’);

    And change #content to your own id or class where is needed.

  33. Jeroen

    I mean:

    I think I solved the known limitation that the height isn’t calculated accurately. Add the following code just before })(jQuery);

    $(”).insertAfter(‘#content’);

    And change #content to your own id or class where is needed.

  34. Jeroen

    It seems my code is stripped:
    You have to write a clear div between the first ”.

  35. josh

    Hi, how can I integrate this into wordpress template files?
    Is there a standardised method?

  36. Pingback: Let’s Bring faux-column to CSS : Create Awesome

  37. Pingback: 5 методов выравнивания колонок в шаблоне | psd2html5

  38. Pingback: How do I keep two divs that are side by side the same height?

  39. Pingback: Making dynamic sized boxes

  40. Pingback: Como hacer que dos o mas columnas mantengan la misma altura | CuchillaSuiza

  43. Roel

    Hi! Great plugin first of all!
    I’m currently working on a website which has a dynamic layout. It looks at the window size and applies the correct stylesheet accordingly (adds class high med or low to selected elements).
    Because there are quite a few differences between the layouts I tried to figure out how to disable/unbind equalheights when one of the smaller layouts is triggered, but I can’t get it to work. Do you have any pointers on how I might be able to achieve this?

  45. Pingback: 要素の高さをそろえる jQuery プラグイン The EqualHeights jQuery Plugin // understandard

  46. Yolande Crafford

    CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). ..

    Warm regards
    <http://www.caramoan.ph

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>