FF won't extend vertically past viewport

I've stripped this code down to the bare minimum, but I still can't figure out why the right and left side filler images won't extent down the whole page if the content goes down beyond the browser viewport. Any help you can offer will be greatly appreciated!

I've been testing using Firefox 1.5 and Internet Explorer 6. It works fine in IE, but not in FF.

I've tried adding min-height to the container, but that didn't work. Actually, the only reason I have the html,body{height:100%} in there is 'cause I know that's what people will ask for. If I remove it, nothing changes.

CSS:


html * {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
}
#container {
width: 776px;
margin-right: auto;
margin-left: auto;
}
#left {
float: left;
width: 28px;
height: 100%;
background-image: url("../images/side_filler.jpg");
background-position: top left;
background-repeat: repeat-y;
}
#center {
float: left;
width: 714px;
text-align: center;
}
#right
{
float: right;
width: 25px;
height: 100%;
text-align: right;
background-image: url("../images/side_filler.jpg");
background-position: top right;
background-repeat: repeat-y;
}
#footer {
width: 714px;
text-align: center;
}

HTML:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="css/test.css">
<!--[if IE]><link type="text/css" rel="stylesheet" href="css/ie.css"/><![endif]-->
</head>
<body>
<div id="container"> 
<div id="left"></div>
<div id="right"></div>
<div id="center">
<p>content starts here...</p>
<p>...</p>
<p>If you extent this content down the page past the viewport, the left and right side fillers are cut off.</p>
</div>
<div id="footer">Copyright here</div>
</div>
</body>
</html>

FF won't extend vertically past viewport

jcsolutions

jcsolutions

SuzyUK

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week