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.

Demo Here

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

Step #2: Then, the styling for the test page. Three columns 120px wide.

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.

<code><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});
    });
</code>

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

<code>



<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>



</code>