JQuery Custom Plug-in: Equal Height Columns

Do you ever get frustrated with creating columns of equal size using CSS? If you are, you have the same feeling as many of us developers. Creating faux columns is one option, but may I suggest using JQuery to make this process a synch. In the following tutorial we will be creating a JQuery Plug-in that will allow us to use a single line to make our divs equal heights.

Note: Please visit, CSSNewbie to get another similar approach. I have taken some ideas from this post, but have implemented it as a plug-in unlike his example.

Below shows the problem:

CSS Un-Equal Height Divs

First of all, shuffle over to JQuery.com like always and download the latest JQuery version. Place this file in a folder called “js”. Now let’s build our structure and presentation:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Equal Heights using JQuery:: Brenelz.com</title>
<style style="text/css">
    body { font: 0.75em Arial, Helvetica, sans-serif; background-color: white; }
    #wrapper {  width: 760px;margin: 0 auto; }
    .column {float: left; padding: 10px; }
    #col1 { width: 110px;margin-right: 10px;background-color: #E2DDC4; }
    #col2 {width: 200px;margin-right: 10px;background-color: #B5C9DA; }
    #col3 {width: 210px;background-color: #E87C5E; }
</style>
        <script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
    </head>
    <body>
        <div id="wrapper">
            <h1>Equal Heights Using JQuery</h1>
            <div class="column" id="col1">
                <p>This three-column design features three columns with significantly varying quantities of content.</p>
            </div>
            <div class="column" id="col2">
                <p>Normally these divs would all be different heights but using JQuery we can make them all the same heights. No faux columns, or other repeating background tricks are needed!</p>
                <p>They're simply individual divs sharing the same class name, which we can use in our JQuery.</p>
            </div>
            <div class="column" id="col3">
                <p>And this can be done using a custom plug-in and 1 line of JavaScript!</p>
            </div>
        </div>
    </body>
</html>

Nothing too complicated here. I am going to assume you have basic knowledge of HTML and CSS, so we can focus on the JQuery. Let’s add a touch more JavaScript to our head that will represent what we want to do.

<script type="text/javascript">
    $(function(){
        $('.column').equalHeight();
    });
</script>

This won’t work yet obviously because equalHeight() is not a function that JQuery comes with by default. I will now show you how to make a custom plug-in.

Create an external JavaScript file called jquery.equalHeight.js in the "js" folder
Include it in the current HTML file just under your JQuery include

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

Now that the files are all linked up lets edit our jquery.equalHeight.js:

    // make sure the $ is pointing to JQuery and not some other library
    (function($){
        // add a new method to JQuery

        $.fn.equalHeight = function() {
           // find the tallest height in the collection
           // that was passed in (.column)
            tallest = 0;
            this.each(function(){
                thisHeight = $(this).height();
                if( thisHeight > tallest)
                    tallest = thisHeight;
            });

            // set each items height to use the tallest value found
            this.each(function(){
                $(this).height(tallest);
            });
        }
    })(jQuery);

Save this file and open it up. You should now see that each DIV has the same height.

Equal Height CSS Divs

I hope you have learnt the basics of JQuery, along with learning how to extend JQuery for your future projects. Please download the JQuery Equal Height Tutorial Files, and feel free to fiddle around with the code.

Share and Enjoy:

Tags: JavaScript, jquery

Written by Brenley Dueck

7 Responses to “JQuery Custom Plug-in: Equal Height Columns”

Rob Glazebrook Says:
December 11th, 2008 at 3:08 pm
If you’re going to steal my content and post it as your own, I’d appreciate you at least giving me a link back to my site!
http://www.cssnewbie.com/equal-height-columns-with-jquery/
admin Says:
December 11th, 2008 at 3:19 pm
I have added a note with a link to your site. I had changed your code to implement it as a plug-in, to further what you had explained in your post.
I see that you now have taken the same idea, and created a plug-in yourself.
Chris Says:
March 16th, 2009 at 1:21 pm
Thank you so much this is the only one i have got 2 work.
Greg Says:
April 12th, 2009 at 5:19 am
Hi
I’m using your code and it works well.
However, when one of the columns contains divs set to display:none and subsequently to display:block via a .click(function() I cant’t get the eqHeight function to recalculate. The height of the columns remains as they were when the page loads. Is there a way to get the eqHeight function to run again after the click event?
Any help will be much appreciated.
Thanks
T Benvenuti Says:
May 20th, 2009 at 8:22 am
Hello,
Thanks for the trick, but i’m having trouble using this with a background image based columns where I use two png’s for the tops and bottoms of the columns and a third one for the middle section; is there a way to make this work with image based columns rather than background-color columns?
Any help would be appreciated!!!
T.
get tall Says:
November 26th, 2009 at 9:31 am
Thank you for providing valuable info regarding the subject. I am an admirer of your writing. Keep up the good work.
how grow taller Says:
November 29th, 2009 at 12:02 pm
Very great idea. I am very happy to I found this post. Thank you for giving us nice posts.