Pin Me

Using CSS and JavaScript to Create Columns of Equal Height

written by: •edited by: Robin L.•updated: 5/24/2011

Multi-column layouts can create issues where the columns heights are dependent on their content, which prevents them from lining up correctly at the bottom. This JavaScript function is one of the easiest solutions to this problem.

  • slide 1 of 4

    Introduction

    These days, web design is dictated by HTML and CSS coding. Gone (mostly) are the days of table-based layouts. Now we use "divs", and apply characteristics to each div in CSS.

    I usually don't set <div> heights in my CSS. I find that it just causes problems later in the design, usually conflicting with browsers or later code.

    But multi-columned layouts have a problem:

    If your layout has three or more columns, the columns will all be different heights, depending on the length of the contained content.

    And that gets ugly.

    There are a couple of different ways to fix that, but in this article I'm going to discuss a CSS and JavaScript method.

  • slide 2 of 4

    The Problem

    Your CSS might look like this,

    body {

    margin: 0;

    }

    #leftcol {

    background: #000eee;

    float: left;

    width: 17%;

    }

    #content {

    width: 65%;

    float: left;

    background: #000;

    }

    #rightcol {

    float: right;

    width: 17%;

    background: #22ee00;

    }

    with this HTML:

    <html>

    <head>

    <title>Some Title Here</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    </head>

    <body>

    <div id="leftcol">

    Left Column

    Content goes here...

    </div>

    <div id="rightcol">

    Right Column

    Content goes here...

    </div>

    <div id="content">

    Center Column

    Content goes here...

    </div>

    </body>

    </html>

    As you can see, the div titled "leftcol" is floated to the left, "rightcol" is floated to the right, and the center "content" div has been floated left to stay in between the two columns. Each div has been given a width as a percentage, which is used for fluid layouts, but for fixed layouts you can use pixels.

    So whats the problem?

    Right now, all three divs have exactly the same amount of content, so they will be the same height.

    But it's unlikely this will be the case on an actual site. There will be different amounts of content in each column, and your site will end up looking like this:badlayout When it should look more like this:goodlayout So how to keep the columns at equal lengths?

  • slide 3 of 4

    JavaScript Solution

    JavaScript code is extremely flexible and can be applied to any variation of this design.

    The code will stay mostly the same, with the exception of an added class in the CSS and HTML. JavaScript interacts with websites based on div classes.

    So add a class called .container to the CSS, and add the container class to each of your columns in the HTML. You can style the class or leave it empty.

    Now, add this JavaScript to your HTML:

    <script language="javascript">

    matchHeight=function(){

    var divs,contDivs,maxHeight,divHeight,d;

    // get all <div> elements in the document

    divs=document.getElementsByTagName('div');

    contDivs=[];

    // initialize maximum height value

    maxHeight=0;

    // iterate over all <div> elements in the document

    for(var i=0;i<divs.length;i++){

    // make collection with <div> elements with class attribute 'container'

    if(/\bcontainer\b/.test(divs[i].className)){

    d=divs[i];

    contDivs[contDivs.length]=d;

    // determine height for <div> element

    if(d.offsetHeight){

    divHeight=d.offsetHeight;

    }

    else if(d.style.pixelHeight){

    divHeight=d.style.pixelHeight;

    }

    // calculate maximum height

    maxHeight=Math.max(maxHeight,divHeight);

    }

    }

    // assign maximum height value to all of container <div> elements

    for(var i=0;i<contDivs.length;i++){

    contDivs[i].style.height=maxHeight;

    }

    }

    // execute function when page loads

    window.onload=function(){

    if(document.getElementsByTagName){

    matchHeight();

    }

    }

    </script>

    To explain how the JavaScript works:

    The JavaScript function first grabs all the div elements in the HTML. Then an array stores all of the div elements that are classed with .container.

    The maxHeight variable grabs the maximum height for those divs. You don't have to specify this anywhere, it just calculates the height of each div and grabs the height of the tallest column.

    The JavaScript then applies that maximum height and applies it to all the .container classed divs, resulting in all the columns being the same height, regardless of content.

  • slide 4 of 4

    Conclusion

    JavaScript is a simple solution to the problems that cause columns to exist at different heights.

    Beware, if users have disabled JavaScript in their browsers, the function will not run, and the columns will appear as they would without the script. If this is a concern for you, you may have to look for another solution.