Columns of equal height

I was frustrated trying to find an easy way to make all my columns the same height. I finally just put together a simple jQuery script to do just that, without using a jQuery plugin.

Note: This post was updated 1/8/14 for the newest version of jquery, and cleaned up the post. If you view source on the Demo, you can get a clean copy of the entire file.

Demo Here

Step #1:
First, call jQuery from the googleapis.com site

<script type="text/javascript”" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"</script>

Step #2:

Then, the styling for the test page. Three columns 120px wide.

1
2
3
4
5
6
7

<style type="text/css">
  #container {width:500px;margin:0 auto;}
  #container div {margin:0 5px;padding:5px;}
  #left_col {width:120px;float:left;background:gray;}
  #mid_col {width:120px;float:left;background:brown;}
  #right_col {width:120px;float:left;background:orange}
</style>

<style type="text/css">
  #container {width:500px;margin:0 auto;}
  #container div {margin:0 5px;padding:5px;}
  #left_col {width:120px;float:left;background:gray;}
  #mid_col {width:120px;float:left;background:brown;}
  #right_col {width:120px;float:left;background:orange}
</style>

Step #3:
Then the actual jQuery script.

The idea is to get the height of each div inside #container and store it in tallest if it is larger than the previously tested div.

After getting the tallest height, set all divs inside container with the .css jQuery operation.

<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function() {
         var tallest = 0, currentTallest;
         $('#container div').each(function(){
                currentTallest = $(this).height();
                if(currentTallest>tallest){tallest = currentTallest;}
         })
         jQuery('#container div').css({'height': tallest});
    });
// ]]></script>

Step #4:
Here is the HTML markup for the page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="container">
    <div id="left_col">
        This is some content
    </div>
    <div id="mid_col">
         Lorem ipsum dolor sit amet consectetuer rhoncus id id habitasse
        consectetuer. Convallis est Vestibulum In  o nulla vitae. Elit leo
        egestas lobortis Praesent Vivamus turpis nibh laoreet lacinia felis.
        Cursus eget massa  iaculis  midunt dui ame
    </div>
    <div id="right_col">
        Lorem ipsum dolor sit amet consectetuer hac aliquet just  dfdf fff
        and more content to make it go longer.
    </div>
</div>

<div id="container">
    <div id="left_col">
        This is some content
    </div>
    <div id="mid_col">
         Lorem ipsum dolor sit amet consectetuer rhoncus id id habitasse
        consectetuer. Convallis est Vestibulum In  o nulla vitae. Elit leo
        egestas lobortis Praesent Vivamus turpis nibh laoreet lacinia felis.
        Cursus eget massa  iaculis  midunt dui ame
    </div>
    <div id="right_col">
        Lorem ipsum dolor sit amet consectetuer hac aliquet just  dfdf fff
        and more content to make it go longer.
    </div>
</div>