Menu
Hi all I'm trying to build a layout using CSS and I'm coming up against a strange problem. Well strange for me. I have 3 divs a Header, a Footer and a MainContent area. Header and Footer must remain at a constant width of 100% while the MainContent area must be fixed centrally at 996px; This is all fine however when I resize the browser window to a width lower than 996px and then scroll the content of the window right the 100% header and footer seem to be truncated and are no longer 100%. I've knocked up a little bare-bones script to illustrate the issue (styles inline to keep it compact). I know I can add overflow:hidden to each of the containers in order to turn off the scrollbars when to window is resized. I've also written a small piece of jQuery to force the div's back to the width, if the width drops below a certain width. However my question is around the CSS, is there a better pure CSS fix for this issue? Or can anybody explain why this happens? Thankyou in advance! DotsC
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div width test</title>
</head>
<body style="border:none; margin:0; padding:0; height:100%; width:100%">
<div id="header-content" style="width:100%; margin:0; padding:0; background-color:#0000ff; height:50px"></div>
<div id="main-content" style="width:996px; margin:0; padding:0; background-color:#ff00ff; height:250px; margin:auto">
<div id="inner-content">
CONTENT OF THE PAGE HERE
</div>
</div>
<div id="footer-content" style="width:100%; margin:0; padding:0; background-color:#00ffff; height:70px"></div>
</body>
512
I'm not completely clear on your issue, but you can set min-width:996px; on the header and footer to keep them at least as wide as the content.
64
Try this, and please use HTML5's doctype.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body{margin:0;text-align:center;}
.header,.content,.footer{text-align:left;clear:both;margin:0 auto;}
.header,.footer{width:100%;background-color:blue;height:128px;min-width:996px;}
.content{width:996px;height:512px;background-color:red;}
</style>
<title>Index</title>
</head>
<body>
<div class="header">
Header stuff here
</div>
<div class="content">
Page content stuff here
</div>
<div class="footer">
and your footer...
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
