Dynamic width problem

Hello,
I'm building a site (actually a wordpress theme) that has 3 columns. 2 of the columns are with fix width and the main one (at the right) as a dynamic width which is set in JavaScript...

My problem is that I have two pages that was build with the same tamplate
but acts differently- it looks as though the width of the main content column in each of them is difrent but I added an alert and it's says the same width.


here are the two pages:





here is the java script code which is called on "onload" and "onresize":

<script language="javascript" type="text/javascript">
<!--

function changeSize()
{
	var divh = 0;
	var navigationElement = document.getElementById('navigation');
	var sitesElement = document.getElementById('sites'); 

	if(document.getElementById('content') != undefined)
	{
		
		var contentElement = document.getElementById('content');
		contentElement.style.width = (windowWidth() - ( navigationElement.offsetWidth + sitesElement.offsetWidth) - 60) + 'px';
		contentElement.width = contentElement.style.width;
		alert("width: " + contentElement.style.width);
	}
	else
	{
		var contentElement = document.getElementById('home_content');
		contentElement.style.width = (windowWidth() - ( navigationElement.offsetWidth + sitesElement.offsetWidth) - 50) + 'px';
	}
	
	
	 /*alert(window.innerWidth + " " + contentElement.style.width);*/
	 divh = contentElement.offsetHeight;
	 navigationElement.style.height = (divh - 30) + 'px';
	 sitesElement.style.height = (divh - 50) + 'px';
 }
 
 function windowWidth()
 {
	var Width;
	
	if (window.innerWidth)
	{
		Width = window.innerWidth;
	}
	else if (document.documentElement && document.documentElement.clientWidth)
	{
		Width = document.documentElement.clientWidth;
	}
	else if (document.body)
	{
		Width = document.body.clientWidth;
	}
	
	if (document.all)
	{
		Width += 17;
	}
	
	return Width;
}
//-->
</script>

Code (markup):

--- Both pages uses the 'content' element, not the 'home_content' element (this is only for the homepage tamplate)---

--This problem happens on firefox and chrom, it doesn't happen on IE, And it happens only when the window is in "maximize" mode.

any ideas?

thanks!

 

May I ask why you need a script for this ? Say you have a markup as below.

<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>

Code (markup):

styled as below...

col1 - width 50px, floated left
col2 - width 100px floated left
col3 - margin-left: 150px.

The third column will expand to fill up the rest of the window with out any assistance from javascript. Hence the question.

 

I tried your way but the width of the right column still looks diffrent in some of the pages...

 

That may have something to do with styling or size of the contents of the third div. Here is a bare bones demo of what I was suggesting. The numbers in the div's are their widths.

test link