« Color Wheel Pro
Give Browser Specific CSS Files With PHP »

Web Design Trick: Javascript Column Heights

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

This is a simple web design trick I use in order to keep the left and center columns the same height when needed. There are a few CSS hacks you can try to accomplish the same thing, however because of browser compatibility I find it is much better to use javascript.

So to be clear, here is the problem, you design a website to have a left column and a center column. The left column content almost stays the same from page to page so it is usually the same height. The center column, which houses the main content, changes from page to page so sometimes it may be longer or shorter than the left column. By the way, you can use this script with as many columns as you like, it is not restricted to just two.

Script Overview

The javascript is placed in the header section of the page. Classes are placed inside of the divs that you want to be the same height. When the page loads, the javascript determines which of the divs is the tallest and makes the other div the same height. Pretty simple huh?

First copy this into the head section of your web page, (or you can use an external javascript). The comments should explain the script. It will work right out of the box.

fixHeight=function(){
// Declare and initialize variables
var divs,contDivs,maxHeight,divHeight,d;
maxHeight=0;
contDivs=[];
divs=document.getElementsByTagName(‘div’); // get all <div> elements in the document
for(var i=0;i<divs.length;i++){ // for all divs…
if(/\bfixheight\b/.test(divs[i].className)){ // find those with the class attribute ‘fixheight’…
d=divs[i];
contDivs[contDivs.length]=d;
// determine their height, defined as either offsetHeight or pixelHeight
if(d.offsetHeight){ divHeight=d.offsetHeight; }
else if(d.style.pixelHeight){ divHeight=d.style.pixelHeight; }
// Keep track of the largest div height
maxHeight=Math.max(maxHeight,divHeight);
}
}
// assign all divs the height of the tallest div
for(var i=0;i<contDivs.length;i++){
contDivs[i].style.height=maxHeight + "px";
}
}
// Run fixheight on page load
window.onload=function(){
if(document.getElementsByTagName){ fixHeight(); }
}
// ]]>