Geek Answers Handbook

CSS width 100% when resizing the browser

Hi everyone, I'm trying to build a layout using CSS, and I am facing a strange problem. Well, strange to me. I have 3 divs Header , Footer and MainContent . The header and footer should remain at a constant width of 100%, while the MainContent area should be fixed centrally at 996 pixels; This is all fine, however, when I resize the browser window to a width below 996 pixels and then scroll the contents of the window directly, the 100% header and footer seem to be truncated and no longer 100%. I illustrated the problem with small bare bones script (styles are built in to keep it compact). I know that I can add overflow: hidden for each of the containers to disable scrollbars when the window is resized. I also wrote a small jQuery piece to make the div go back to width if the width falls below a certain width. However, my question is CSS related, is there a clean CSS fix for this problem? Or can someone explain why this is happening? Thanks 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>

+6
css width scrollbars
source share
2 answers

I do not quite understand your problem, but you can set min-width:996px; in the header and footer so that they are at least wider than the content.

+5
source share

Try this, please use the HTML5 method.

 <!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>
+2
source share

More articles:


All Articles