Dear Overflowing Stackers,
My page is proving to be a real pain the behind. I was experiencing this problem:
background is only as wide as viewport
and I tried to remedy it by putting a min-width on the body. That works just fine; everything displays properly, but only if my min-width has a value high enough to encompass my #navwrapper div (it’s the one with the green swirly vector art background).
With such a high value (1265px) many users will be given a horizontal scrollbar, which I don’t want. I have a really wide skyline image in the footer (3,000px) and it doesn’t cause a scrollbar, so I’m wondering why my navwrapper does. Ideally, I want the page to have a min-width of 960px, so the navwrapper will stay centered, and the edges will get clipped if the edges extend past the viewport.
An early version of my page is here: http://jezenthomas.co.uk/poison2/
Hope someone can figure it out!
Your navwrapper has content in it. Your skyline is just a background image. Browsers treat content with priority and allow backgrounds to just fall outside of the viewport. If you want to prevent scrollbars, you can add
which will hide any horizontal scrollbars.