I am working a website. And I'm having an issues. The website extends beyond the page. I have the header set to 100% width. I think it has to do with the character container I have. Is there anyway to deal with this? I can't change the innerwrapper to much, because it allows the character div to extend to the bottom of the content and page all of the time. This keeps anything from ever going over in the white area. Thanks in advanced.
http://172.31.0.246/~Paul/test/
index.html
<div id="wrapper"> <?=SITE_NAME?> <div id="character"></div> <div id="innerwrapper"> <div id="header"> This is header content. </div> <div id="content"> <p>This is content.</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> <p>x</p> </div> <div id="spacer1"> </div> </div> </div>
style.css
/* Global */ * { padding: 0em; margin: 0em; } html { width: 100%; height: 100%; } body { width: 100%; height: 100%; background: url('images/background.gif') repeat-y #E78700; font-family: tahoma, helvetica, sans-serif; font-size: 8pt; color: #492802; } #wrapper { width: 100%; height: 100%; } #innerwrapper { position: relative; /*** Let's be nice to IE ***/ width: auto; /*** Content Width ***/ display: table; /*** For non-IE browsers ***/ height: 100%; width: 100%; margin-right: 219px; } #innerwrapper { height: auto; min-height: 100%; } #spacer1 { width: 100%; clear: both; } /* Common elements */ /* Layout (Every page) */ #character { width: 219px; height: 100%; min-height: 574px; background: url(images/character.png) no-repeat; float: left; } #header { width: 100%; min-width: 800px; height: 179px; background: url('images/header.gif') repeat-x; }
width: 100%; margin-right:
width: 100%; margin-right: 219px
Can't have 100% width and a margin that makes for greater than 100%. 100% is a computation and computed to pixels based on parent width or viewport; at a 100% it's as wide as it can possibly be unless you add to that with border, padding or margins then it will overflow the viewport/element area.
Altogether I see far too many width:100% statements it isn't necessary to state this property width;100% is the default behaviour of block level elements, but by not stating it you leave option for stating margins and in turn reducing that width to accommodate margins without extending beyond 100%.