document.body.offsetWidth changing 1

[tiamat2012]

Hey all,

I'm running into a problem. I'm trying to make my css columns of a certain width so that they fix the screen perfectly, so I'm using it to get the width of the screen and doing somethings with it.

The problem is the offsetWidth changes. Apparantly when it the function it picks up my resolution (1280x1024), which does not include the scrollbar on the right. This makes my columns not align because when the page is fully loaded it isn't the right size.

When the page is loaded the offsetWidth is 1264(16 pixels for the scroll bar in Firefox, 20 for IE). Does anyone know how I can fix this?

here's my js code:

function fixWidth()
{
	var maincontent, header, changeto;
	changeto = document.getElementById("box").offsetWidth - 400; // Set the width of the columns, left column = 200px, right column =  200px
	maincontent = document.getElementById("maincontent"); // Get center column
	header = document.getElementById("header"); // Get top column
	maincontent.style.width = changeto + "px"; // Set center column's width
    header.style.width = changeto + "px"; // Set top column's width
}

If you want to see my site and what I mean go to

http://kerryj.atspace.com

thank you very much!
-Kerry

 

[LFI]

I might be misunderstanding you, but...

When are you calling this function? It should only be called when the page is fully loaded, yes? Then put the call in the BODY tag's ONLOAD event.

Another interpretation of your question might lead me to answer in this way:

What if you use clientWidth instead of offsetWidth? ...or scrollWidth?

Dave

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...east is east and west is west and if you take cranberries and stew them like applesauce
they taste much more like prunes than rhubarb does

 

[tiamat2012]

that fixed the problem, thank you!

doing it on the onLoad event and using clienWidth and it worked perfectly (in Firefox, the rest is a CSS problem that I'm handling in that forum)

-Kerry