My guess is that this is because
'width: 100%' means the width of the
browser window, rather than the entire
width of the page, is there a way to
fix this?
100% means it'll be as wide as the parent element it is positioned relative to (in this case, body, the width of which will be based on the width of its parent, html). Which will be as wide as the browser window, unless you specify otherwise.
The problem is, you have another child of body which can be wider than body: both #container and #footer are styled such that they will always be at least 1026px wide. This does not widen their parent elements, as we've already established that those will be as wide as the browser window; instead, they overflow their parents. The default response to this is to display scrollbars so that you can scroll and view the overflowing content; if you added the style overflow:hidden to html or body, you'd find your content and footer clipped to the size of the browser window, and no scrollbars displayed.
There are a couple of easy solutions to this:
- Wrap #content and #footer in #upbg instead of preceding them with it. Then remove the existing styles, and style it as follows:
position: absolute; padding-top:25px; background: url(images/bg-dark.jpg) repeat-x scroll 0 0; This accomplishes two things: you're no longer specifying a width for #upbg, thus allowing it to become wide enough to enclose its new children, and it allows you to get rid of a lot of now-unnecessary styling (you'll want to clear out the padding you've set for body as well, along with some style on #content). Alternately,
- Get rid of the minimum width on
#content and #footer, so they don't overflow.