JQuery equal height columns

Posted April 29, 2009

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>

Posted on April 29th, 2009 by Clayton

Posted in Web Design

3 Comments

3 Comments

  • It’s a pity you don’t have a donate button! I’d certainly donate to this fantastic blog! I guess for now i’ll settle for book-marking and adding your RSS feed to my Google account. I look forward to brand new updates and will share this blog with my Facebook group. Chat soon!

  • I relish, cause I found exactly what I used to be taking a look
    for. You’ve ended my four day long hunt! God Bless you man.
    Have a great day. Bye

  • reklama says:

    First of all I want to say great blog! I had a quick question that I’d like to ask if you don’t mind.

    I was curious to find out how you center yourself and clear your head prior to writing.
    I have had a hard time clearing my mind in getting my thoughts out there.
    I do take pleasure in writing however it just seems like the first 10 to 15 minutes tend
    to be wasted simply just trying to figure out how to begin.
    Any ideas or tips? Thanks!

Leave a Reply