Web Design Trick: Javascript Column Heights

Posts by Category

Recent Articles

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.

  1. <script type="text/javascript"><!–mce:0–></script>

  1.  
  2. fixHeight=function(){
  3.  
  4.                 // Declare and initialize variables
  5.  
  6.                 var divs,contDivs,maxHeight,divHeight,d;
  7.  
  8.                 maxHeight=0;
  9.  
  10.                 contDivs=[];
  11.  
  12.        
  13.  
  14.                 divs=document.getElementsByTagName(‘div’);              // get all <div> elements in the document
  15.  
  16.                 for(var i=0;i<divs.length;i++){                         // for all divs…
  17.  
  18.                         if(/\bfixheight\b/.test(divs[i].className)){    // find those with the class attribute ‘fixheight’…
  19.  
  20.                                  d=divs[i];
  21.  
  22.                                  contDivs[contDivs.length]=d;
  23.  
  24.  
  25.  
  26.                                  // determine their height, defined as either offsetHeight or pixelHeight
  27.  
  28.                                  if(d.offsetHeight){ divHeight=d.offsetHeight; }
  29.  
  30.                                  else if(d.style.pixelHeight){ divHeight=d.style.pixelHeight; }
  31.  
  32.  
  33.  
  34.                                  // Keep track of the largest div height
  35.  
  36.                                  maxHeight=Math.max(maxHeight,divHeight);
  37.  
  38.                         }
  39.  
  40.                 }
  41.  
  42.  
  43.  
  44.                 // assign all divs the height of the tallest div
  45.  
  46.                 for(var i=0;i<contDivs.length;i++){
  47.  
  48.                         contDivs[i].style.height=maxHeight + "px";
  49.  
  50.                 }
  51.  
  52.         }
  53.  
  54.  
  55.  
  56.         // Run fixheight on page load
  57.  
  58.         window.onload=function(){
  59.  
  60.                 if(document.getElementsByTagName){ fixHeight(); }
  61.  
  62.         }
  63.  
  64.         // ]]>

The divs you want to have same height should look like this:

  1.  
  2. <div class="fixheight">
  3. </div>

Now you’re done. I have tested this in Firefox, IE, Safari and Opera and I have found one bug which I put in this page so you could see it.

I hope this script is helpful to you. Have fun web designing
;)

At Atlanta Web Design, we offer comprehensive web development solutions to our clients including e-commerce, conent management systems, customer management and general design services.

Leave a Reply