Background getting clipped; page wider than expected

Dear Overflowing Stackers,

My page is proving to be a real pain the behind. I was experiencing this problem:

Read More

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!

Related posts

Leave a Reply

1 comment

  1. 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

    body {
       overflow-x:hidden;
    }
    

    which will hide any horizontal scrollbars.