Use JS to align my Divs ??

[ginerjm]

I haven't figured out a good design method to get my 3 column page layout to show the 3 divs across at the same height.  It occurred to me that JS could help me, after the page was loaded.  So - I wrote the following:

function FixDivs()
{
var lh = document.getElementById("left").offsetHeight;
var mh = document.getElementById("middle").offsetHeight;
var rh = document.getElementById("right").offsetHeight;
var newh = Math.max(lh,mh,rh);
alert("Current h are: lh "+lh+" mh "+mh+" rh "+rh);
document.getElementById("left").style.offsetHeight=newh+"px";
document.getElementById("middle").style.offsetHeight=newh+"px";
document.getElementById("right").style.offsetHeight=newh+"px";
lh = document.getElementById("left").offsetHeight;
mh = document.getElementById("middle").offsetHeight;
rh = document.getElementById("right").offsetHeight;
alert("New h are: lh "+lh+" mh "+mh+" rh "+rh);
}

 

I get the values for my three divs and then try and reset all 3 to the max value of those 3 heights.  But my second alert (and my eyeballs) show that nothing changes.

 

Any ideas?

[nogray]

style doesn't have offsetheight, only height

change .style.offsetHeight to .style.height

[ginerjm]

Adding to my original Post -

 

I should say that the process is having an effect - tried it on a different page that had more noticeable differences and can see progress.  BUT - they still have minor differences - a few pixels (4-8?) is all, but still annoying.  I have no margins on any of my divs so what is keeping them from lining up perfectly?

[ginerjm]

Okay - my revised function is below:

function FixDivs()
{	var lh = document.getElementById("left").clientHeight;
var mh = document.getElementById("middle").clientHeight;
var rh = document.getElementById("right").clientHeight;
var newh = Math.max(lh,mh,rh) +"px";
document.getElementById("left").style.height=newh;
document.getElementById("middle").style.height=newh;
document.getElementById("right").style.height=newh;
}

It does have an effect, but it is not perfect.  It appears to make one div a couple pixels (4?) taller/longer than the other two.  Again - I can find no margin settings that affect these - what else could it be?

[ginerjm]

ok - more info on what is happeng.

 

My three sizes come back as 616, 684 and 610.  The 'new' size chosen is 684.  This is what I would expect my code to do.

 

After resetting the .height props on all three divs, my 'new' sizes for each respectively are: 692, 700 & 684.

 

Where are these numbers coming from??

[ginerjm]

the problem with my minor differences after making div height adjustments was that the clientHeight returned for comparison includes the padding of the div element.  By subtracting the top and bottom padding amounts from my proposed 'new' height for the div, my re-size makes it the correct size.

 

left.style.height   = (newh - (parseInt(getStyle(left,"paddingTop")) + parseInt(getStyle(left,"paddingBottom")))) +"px";
[\code]

Set the div style height to the calculated new height less the two padding amounts already in place.

[Adam]

If you provide the mark-up, there's almost always a better way to do this using just CSS.