The EqualHeights jQuery Plugin

Published December 10, 2008 by CSS Newbies.

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:


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:


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() {

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:

    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!

172 Responses

  1. Marc (reply)

    Short, simple and easiest to use. The only thing that it needs now is to be responsive with the way the Web is going.

    Any hint or support for RWD in any upcoming updates?

  2. Meir (reply)

    Excellent plugin. FYI: the columns I was balancing had padding, which your plugin did not take into account. If you need to account for padding/border/outline calculations before balancing, you can wrap the divs in question in a wrapper and call equalHeights on the wrapper, or you can replace the three instances of height() in the plugin with outerHeight().

  3. mwcz (reply)

    I suggest adding “var” before the “tallest” variable. Currently this script is leaking “tallest” into the global scope.

  4. Pingback: blue ofica

  5. Pingback: force li to scale to text field in the views-ticker module | DL-UAT

  6. Pingback: 이웃한 DIV 높이 값을 동일하게 맞추는 법 - 워드프레스 블룸

  7. Pingback: Setting dynamic, equal heights for multiple elements with jQuery - Press Up

  8. Pingback: Tutorial: Creating a Responsive Calendar – Search Discovery

  9. Pingback: 이웃한 DIV 높이 값을 동일하게 맞추는 법 – 작업노트

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

Leave a Reply

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