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>