CSS Layout in Firefox - Background Height
This layout works fine in IE, but in Firefox the background height is fixed to the size of the window when it first loads. If the page length is longer and I scroll down, the background is white and the side bars don't extend. Any ideas on how to fix this?
<html>
<body style="margin:0px; padding:0px; height:100%;">
<form style="height:100%;">
<div style="background-color:#3
<div style="margin:auto; width:900px; height:100%; background-color:#ffffff;"
<div style="position:relative; height:100%; width:100%;">
<div style="position:absolute; top:0px; left:-10px; width:10px; height:100%; background-color:#000000;"
</div>
<div style="position:absolute; top:0px; left:900px; width:10px; height:100%; background-color:#000000;"
</div>
<div style="position:relative; height:100%; width:100%;">
<div style="width:100%; height:50px; background-color:#666666;"
</div>
<div style="width:100%;">
<div style="float:left; width:185px; background-color:#999999;"
<br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div style="float:right; width:715px; background-color:red;">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
<html>
<body style="margin:0px; padding:0px; height:100%;">
<form style="height:100%;">
<div style="background-color:#3
<div style="margin:auto; width:900px; height:100%; background-color:#ffffff;"
<div style="position:relative; height:100%; width:100%;">
<div style="position:absolute; top:0px; left:-10px; width:10px; height:100%; background-color:#000000;"
</div>
<div style="position:absolute; top:0px; left:900px; width:10px; height:100%; background-color:#000000;"
</div>
<div style="position:relative; height:100%; width:100%;">
<div style="width:100%; height:50px; background-color:#666666;"
</div>
<div style="width:100%;">
<div style="float:left; width:185px; background-color:#999999;"
<br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div style="float:right; width:715px; background-color:red;">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Phatzer
It is difficult to get DIV's to follow suit with other DIV's in terms of height. I think you are probably better looking at using tables at least for the basic layout.
ASKER CERTIFIED SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.