DOM Resizing CSS <divs>

[(Shovel)]

Hello,

I'm working on a site which, due to the nature of CSS, needs an onload function to reposition a few layers, based on the content that is produced.

It's very similar to what TechNation does, resizing the page body to match the size of the menu dynamically.

In this case, it just has to make the content the same size as the left hand menu, and then size the "container" to force the footer to the bottom of the page.

The container does not get resized automatically as the menu and content are absolutely positioned within the container, and therefore the container does not get expanded - it has a height of "0".

The problem is that it doesn't work. (ha!). The Firebird JavaScript inspector reports that the variables "have no proerties". I tried just putting the getElementById() function in instead of the variables, and I got the same error, saying that "getElementById("content") has no properties".

Here's the code:

function fixSize() {
 				 var content;
				 var lhs;
				 if(!document.getElementById) return;

				 content = document.getElementById('content');
				 lhs = document.getElementById('blk_lhs');
				 container = document.getElementById('container_l1');
				 
				 if(content.offsetHeight > lhs.style.height) {
				 		lhs.style.height = content.offsetHeight;
						container.style.height = content.offsetHeight;
				 }
				 else {
				 		content.style.height = lhs.offsetHeight;
						container.style.height = lhs.offsetHeight;
				 }
}
window.onload = fixSize();

Thanks for any help you can give.

 

[wyrd_fish]

bah, i can never get onLoads to work either

 

[(Shovel)]

Fixed!

function fixSize() {
				 var lhs  = document.getElementById("blk_lhs");
				 var body = document.getElementById("content");
				 var parent = document.getElementById("container_l1");
				 
//				 alert(lhs.offsetHeight);
//				 alert(body.offsetHeight);
//				 alert(parent.offsetHeight);
				 
				 if(body.offsetHeight > lhs.offsetHeight) {
				   lhs.style.height    = body.offsetHeight;
				   parent.style.height = body.offsetHeight;
				 }
				 else {
				   body.style.height   = lhs.offsetHeight;
					 parent.style.height = lhs.offsetHeight;
				 }
				 
}

function brew() {
				 //blankLinks();
			 //alert("Brewing!");
				 fixSize();
}

window.onload = brew;