Web Design Trick: Javascript Column Heights
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(); }
}
// ]]>
The divs you want to have same height should look like this:
<div class="fixheight"> </div>
I hope this script is helpful to you. Have fun web designing
Hi,
Very nice post.Scripts is very good.
Thanks for the sharing the information.
I’ve had similar problems in the past. Thank for the useful tip – I will try it.
Very elegant solution, thanks for sharing this!
Thanks for sharing, I’ve been looking for a simple and easy way to do this. My pages always look funny due to the center column being so long.
it deserve my bookmark.
I will use it on my future reference.
Thanks!
I have had this problem before now so thanks for this!
That’s great solution! Thanks for the tip.
lol…that’s very clever.
Awesome do you find that this slows down the site a bit on older setups?
@Mike, No, actually I haven’t. I usually use very little javascript in my designs so it is not an issues. However, if a design already has large javascript files it may slow things down.
to be clear i have used float to arrange the columns. now the problem is the browser does not know what is the hieght to allocate for all columns. Height:100% wont fix it. i tried your javascript . it is working
thanks
Glad it helped.
Very useful advice here. It is important that your columns look professional and this is a great way to start that process.
Great code. I have a few different java scripts running, and didn’t notice any speed or load change. GREAT ARTICLE!
Thanks,
James
The Sports Picks Guy
Thanks for the trick. I tried it and could not get it to work but I have not given up yet. Thanks for the script.
.-= Jill@Back Rest Pillow´s last undefined ..If you register your site for free at =-.
@Jill, what problems are you experiencing?
Dude this is awesome. I’m gonna give it a go. I do wish you included a sample.
.-= donnie@Website Design Chattanooga´s last blog ..Is Your Web Site Ready for Google Caffeine? =-.
Thanks for sharing the trick. I will definitely try it. Can’t wait actually to try it.
Anyway to get this to re-trigger on a window re size? the heights don’t change if the user re sizes their browser.