Using JavaScript to create equal height columns

Creating websites with tables didn't have many advantages over using CSS, but the ability to easily create equal height columns was one of them.

There are a small number of tried and tested CSS techniques to achieve equal height columns but an ever increasing favourite amongst designers is to use server-side script.

This can be achieved by using DOM JavaScript as below:

// This function below is necessary to take the CSS values as they appear in the external style sheet
function retrieveComputedStyle(element, styleProperty) {
    var computedStyle = null;

    if (typeof element.currentStyle != "undefined") {
        computedStyle = element.currentStyle;
    } else {
        computedStyle = document.defaultView.getComputedStyle(element, null);
    }
    return computedStyle[styleProperty];
}

var $columnOne = document.getElementById("content-left");
var $columnTwo = document.getElementById("content-right");

var $columnOneHeight = document.getElementById("content-left").offsetHeight;
var $columnTwoHeight = document.getElementById("content-right").offsetHeight;

var $columnOneBorderTopWidth, $columnOneBorderBottomWidth, $columnOnePaddingTop, $columnOnePaddingBottom;
var $columnTwoBorderTopWidth, $columnTwoBorderBottomWidth, $columnTwoPaddingTop, $columnTwoPaddingBottom;

// Find border and padding dimensions of #content-left
$columnOneBorderTopWidth = retrieveComputedStyle($columnOne, "borderTopWidth");
$columnOneBorderBottomWidth = retrieveComputedStyle($columnOne, "borderBottomWidth");
$columnOnePaddingTop = retrieveComputedStyle($columnOne, "paddingTop");
$columnOnePaddingBottom = retrieveComputedStyle($columnOne, "paddingBottom");

// Find border and padding dimensions of #content-right
$columnTwoBorderTopWidth = retrieveComputedStyle($columnTwo, "borderTopWidth");
$columnTwoBorderBottomWidth = retrieveComputedStyle($columnTwo, "borderBottomWidth");
$columnTwoPaddingTop = retrieveComputedStyle($columnTwo, "paddingTop");
$columnTwoPaddingBottom = retrieveComputedStyle($columnTwo, "paddingBottom");

// Remove pixels with replace method aand then add top and botton heights
var $columnOneBorderNumber = Number($columnOneBorderTopWidth.replace("px", "")) + Number($columnOneBorderBottomWidth.replace("px", ""));
var $columnOnePaddingNumber = Number($columnOnePaddingTop.replace("px", "")) + Number($columnOnePaddingBottom.replace("px", ""));
var $columnTwoBorderNumber = Number($columnTwoBorderTopWidth.replace("px", "")) + Number($columnTwoBorderBottomWidth.replace("px", ""));
var $columnTwoPaddingNumber = Number($columnTwoPaddingTop.replace("px", "")) + Number($columnTwoPaddingBottom.replace("px", ""));

// Now take the total margins and padding numbers away from the height
var $columnOneFinal = $columnOneHeight - $columnOneBorderNumber - $columnOnePaddingNumber;
var $columnTwoFinal = $columnTwoHeight - $columnTwoBorderNumber - $columnTwoPaddingNumber;

// Use the Maths object to find the highest number and set that in the maxNumber variable
var maxNumber = Math.max($columnOneFinal, $columnTwoFinal);

// Set the height of the columns to be equal
$columnOne.style.height = maxNumber + "px";
$columnTwo.style.height = maxNumber + "px";

The enormous slab of code above creates equal heights for two divs, but by using a library such as jQuery it is possible just to use this:

    var $columnOne = $('#content-left').height();
    var $columnTwo = $('#content-right').height();

    var maxNumber = Math.max($columnOne, $columnTwo,);

    $('#content-left').css("height", maxNumber + "px");
    $('#content-right').css("height", maxNumber + "px");

The above finds the height of the two columns and then uses the JavaScipt Math object to find which value is the largest and then sets that in the CSS. This method does not take into account padding or margin measurments. If required, you'll have to add that separately.

Using this method recently I had a problem with the Webkit browsers. I worked out that Webkit was adding the height of the images to the above calculations, thus, creating uneven columns.

Thinking that it was a new Webkit DOM glitch that jQuery hadn't caught up with yet I tried the JavaScript longhand method but it was still the same.

I finally worked out that the problem lay in how JavaScript was being called as the page loaded.

The usual method of placing jQuery on the page is by using the $(document).ready() function. This calls the JavaScript after the DOM has loaded but before the page content.

Another option is to use the $(window).load() function like so:

$(window).load(function() {

// Code here

});

This allows the script to be executed after both the DOM and the page has been rendered.

Using this function meant that the equal height columns code now worked perfectly.