Equal height columns using jQuery

While working on a project the other day I came across a problem which I’m sure many of you have faced before. I needed my three dynamic height columns, each with different content to be the same height. There are a few ways to do this using CSS, but they require extra HTML markup which I think is a bit messy. So instead I used some clean and simple jQuery magic.

The Problem:

dynamic height boxes

As you can see above, I have three boxes which contain different amounts of text. These boxes are floating left and thus have varied heights which doesn’t look very nice. I need them to all be the same height. (I used some simple sliding doors CSS to get the curved edges on my boxes.)

The Solution:

equal height boxes using jquery

We basically need all boxes to be the same height as the tallest box. So all we need to do is find the tallest box and then apply that height to all boxes. This is exactly what this tiny jQuery plugin will do.

Step 1: Download jQuery

If you’re not currently using jQuery on your site then you will need to download it and include it in your website header as follows.


<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

Step 2: Write your function

Let’s create a file called scripts.js for all of our JavaScript functions and save it in our “js” folder. We also include this in our header like so.


<script type="text/javascript" src="js/scripts.js"></script>

Now we copy and paste the following code into your scripts.js file.


/* Plugin to make variable height divs equal heights */
$.fn.sameHeights = function() {

$(this).each(function(){
var tallest = 0;

$(this).children().each(function(i){
if (tallest < $(this).height()) { tallest = $(this).height(); }
});
$(this).children().css({'height': tallest});
});
return this;
};

Step 3: Call your function

All we need to do now is call our function, so we place the following code in our website header. Make sure you target the parent div surrounding your boxes. In this example I am selecting the “.boxes” class which is the parent div of my boxes. This will cause all child boxes to be given a height equal to that of the tallest child box. Now you should have dynamic height columns which actually have the same height!


$(document).ready(function(){

 /* Make boxes same height */
 $('.boxes').sameHeights();

});

Adham Dannaway

Web Designer and Front End Developer with a passion for web design, coding, blogging, WordPress and chewing gum. Check out my web design portfolio and follow me on Twitter and Facebook!

Share this post!

Tags: , , , ,

  • Share
  • Stumbleupon Cre8ive Commando
    • Share

  1. imran khan on October 17, 2010

    hahaha!!! never thought would be that easy!!!

    Thanks mate =)

  2. Patrick on October 19, 2010

    May be easier and “cleaner” then extra html markup (which is not needed, see http://css-tricks.com/fluid-width-equal-height-columns/), but nowadays lots of people use addons like “NoScript” and in this case, your solution may fail and it wouldnt look that good anymore :)

  3. Cre8ive Commando on October 19, 2010

    Thanks Patrick, I like the Faux Columns idea, but it wouldn’t really work that well for my specific situation, plus it relies on using more/larger images than would usually be required. If people don’t have script enabled then they will just have to miss out on the equal height columns. :-)

  4. Patrick on October 19, 2010

    What images?
    I am talking about the method, using:

    “margin-bottom: -99999px;” and “padding-bottom: 99999px;”, there are no images required :)

  5. Beben Koben on October 20, 2010

    interesting post… nice one, thanks ^^

  6. Jonny Wood on December 14, 2010

    Nice. I’ve tried several CSS and jQuery fixes for equal heights and this is the most simple and effective!

  7. Florencia on May 6, 2011

    Thanks! This is the best solution I ever found. Tiny and simple.

  8. Elektrische Zahnbuerste on December 6, 2011

    I think you did an awesome job explaining it. Sure beats having to research it on my own. Thanks

  9. Artic on January 3, 2012

    Hi. Really awesome tutorial. Worked perfectly the first time I tried it. However I am having a small problem which is holding me back.

    I have a container with the elements I want to set the same height. However those elements are floated, so I need to have a div with clear: both after those 2 divs. What is happening is my clear div is also getting the height from those elements. I pretty much have a blank space with nothing on it because of the clear div.

    My question is: Is there any way to skip any div inside the container? Maybe based on a class or a div?

    If there is a way to do this, your script works perfectly for me.

    Thanks

Trackbacks

  1. [...] This post was mentioned on Twitter by Adham Dannaway, Nigel No Mates, Freddy Schwarz, Jeremy Brown, King Sidharth and others. King Sidharth said: RT @cre8ivecommando: Ever had columns on your website with varied heights? Here's a quick jQuery trick to make them equal heights – http://bit.ly/bhBaEn [...]


Have your say!