Antonius Posted April 22, 2012 Report Share Posted April 22, 2012 (edited) I wanted a header and footer that would have a width expanding the browser window size. My mainwrap has a set width of 1024px while my header and footer are a 100%. When I shrink the browser window width smaller than my 1024px, I get a horizontal scroll bar which I expected. However, when I scroll to the right, my header and footer are cut-off and expand only to the browser window size. I tried min and max width but no change. The padding causes the horizontal scroll bar to show up at all times, which I don't want. How do I get the header and footer width to expand beyond the browser window horizonally with my mainwrap? ISSUE EXAMPLE:~~~~~~~~~~~~~~| <---- HEADER ----|............|| <--------- mainwarp --------> || <---- FOOTER ----|............|~~~~~~~~~~~~~~ XHTML CODE: <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>Divison of Testing</title> <style type="text/css"> /* Tags */ html { font-family: verdana, arial, helvetica, sans-serif; background-color: #eeeeee; height: 100%; } body { margin: auto; height: 100%; } div { font-family: verdana, arial, helvetica, sans-serif; margin-top: 5px; margin-bottom: 5px; } p { font-family: verdana, arial, helvetica, sans-serif; color: black; } h1 { color: black; } /* IDentifiers */ #headwrap { /* centers the contents of the division in the browser window */ width: auto; margin: 0 auto; } #mainwrap { width: 1024px; /* keeps the floating divisions from stacking if the browser window is too small */ margin: 0 auto; /* centers the contents of the division in the browser window */ min-height: 100%; /* pushes the footer to the bottom of browser window regardless of size */ margin-bottom: -60px; /* removes vertical scrollbar due to min-height */ } #footwrap { /* centers the contents of the division in the browser window */ width: auto; margin: 0 auto; } #header { background-color: #ffffff; /* background-image: img.png goes here */ background-repeat: repeat-x; height: 144px; /* matches image background height */ min-width: 100%; /* spans the repeating image or background to the browser window width */ top: 0; margin-top: 0; float: left; b } #blockleft { background-color: #cccccc; float: left; width: 100px; visibility: visible; /* hide if you do not add content but want a block margin */ } #blockright { background-color: #cccccc; float: right; width: 100px; visibility: visible; /* hide if you do not add content but want a block margin */ } #maincontent { font-family: verdana, arial, helvetica, sans-serif; float: left; background-color: #ffffff; border-right: solid; border-right-color: #cccccc; border-bottom: solid; border-bottom-color: #cccccc; margin-left: 10px; margin-right: 10px; } #footer { background-color: #ffffff; min-width: 100%; /* spans the repeating image or background to the browser window width */ bottom: 0; margin-bottom: 0; float: left; } /* Classes */ .cleardiv { /* clears floating on all sides for divisions with this class (used to keep header and footer wrap divs from overlapping mainwrap when horizontal browser window size is too small) */ clear: both; } </style></head><body> <div id="headwrap"> <div id="header"><h1>HEADER CONTENT</h1></div> </div> <div id="mainwrap"> <div class="cleardiv"></div> <div id="blockleft"><p>LEFT'S BLOCK CONTENT</p></div> <div id="maincontent"><p>MAIN BLOCK CONTENT</p></div> <div id="blockright"><p>RIGHT'S BLOCK CONTENT</p></div> <div class="cleardiv"></div> </div> <div id="footwrap"> <div id="footer"><p>FOOTER CONTENT</p></div> </div></body></html> Edited April 22, 2012 by Antonius Link to comment Share on other sites More sharing options...
eTianbun Posted April 22, 2012 Report Share Posted April 22, 2012 did you add min-width to #mainwrap? Link to comment Share on other sites More sharing options...
Antonius Posted April 22, 2012 Author Report Share Posted April 22, 2012 Yes, and when I shrink the browser window, the header and footer are still cut-off when I scroll to the right; that is when the window is smaller then 1024px. Also, when I add min-width: 1024px to my #mainwrap, it causes the divisions to not along into the center of the window. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 22, 2012 Report Share Posted April 22, 2012 zero body margins and use min-width on body body{ margin: 0;padding:0height: 100%;min-width: 1024px;} 2 Link to comment Share on other sites More sharing options...
Antonius Posted April 22, 2012 Author Report Share Posted April 22, 2012 OMG, you are awesome! The layout works in any size window now! Another example of the simplest solution is always the best solution. Thanks again everyone for the help! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now