Hi
I used the next design layout on my site: http://www.krishadlock.com/clients/i...erface/js.html

This layout is a resizable Interface, this is the js code:
Code:
Page = {};

Page.resize = function()
{
	var header = document.getElementById('header');
	var footer = document.getElementById('footer');
	var content = document.getElementById('content');
	var left = document.getElementById('left');
	var right = document.getElementById('right ');
	
	var contentHeight = document.body.offsetHeight - (header.offsetHeight + footer.offsetHeight) +"px";
	content.style.height = contentHeight;
	left.style.height = contentHeight;
	right.style.height = contentHeight;
}

onload = onresize =Page.resize;
css:

Code:
html, body
{
	margin: 0px;
	height: 100%;
}

#header
{
	height: 100px;
	background-color: #333;
	color: #fff;
}

#content div#left
{
	width: 150px;
	float: left;
	background-color: #eaeaea;
}

#content div#gridDiv
{
	float: left;
	margin-bottom:20px;
}

#footer
{
	background-color: #ccc;
	clear:both;
}
I have a problem when I got another div (mydiv) inside "right", this div's height changes because its innerhtml is modified on the fly, so sometimes the height of the div is overlapping the "footer", and I don't want this!
So sometimes, "mydiv" must move "footer" div down
Thx! And sorry about my english