CSS: background absent when scrolling horizontally

Question

OK I have backgrounds set up like this:

HTML

<div id="container">
    <div id="content">
    CONTENT HERE
    </div>
</div>

CSS

#container
{
    background:url(image.gif);
}
#content
{
    width:800px;
    margin:auto;
}

So the idea is for the content to be within an 800px box, while the background for the content spans 100%, I have this same setup for different area like the header, footer, and main portions of the page. So they all haver different backgrounds spanning 100% while the content is all within an 800px box.

All this works fine, until you make the window small enough to show a horizontal scrollbar, then when you scroll horizontally, the revealed portion no longer has a background, yet if you make the page wider, then the background IS there.

You can see it here: Clicky

Is there a way to fix this?

Thanks!!

Answer 1

Since you are using a fixed width content area why not give your #container (actually #inner_content_container on your site) a fixed width also? Since your image is 824px wide I just used FireBug to make your container that width and your problem goes away.

NOTE: When you do this you will need to give the container an auto margin too and set overflow to hidden if you don't want scroll bars..

#container {
  margin:auto;
  overflow:hidden;
  width:824px;
}

Answer 2

As I understand you need to show the background adverts even when the browser is smaller than 800px.

You could set a min-width on #container - make it a bit bigger than the #content box so the browser will get scrollers based on container div not on content anymore.

#container {
background:url(image.gif);
min-width:960px;
}

Note: min-width is not supported by IE7/6, but there are workarounds to make it work there.

Answer 3

I figured out (or it seems) that when you scroll, only #content's background is "revealing" not #container's background. So what I did was set #content to also have the same background as #container This fixes the problem without having to make the scroll bar appear for non-content.