background not showing on 100% width div when scrolling - css

Question

I have a header that is 100% of the page and should have a background-color.
Then I have my content div centered and along width that an extra div to the right for ads.
When shrinking the window so that all content + ads doesn't show I have a horizontal scroll which works great except for that the header looses the background-color for the part which was outside the viewport. How can I get the background-color to run all the way?
A simple solution is to set the top background-color on body instead but we'll want the same design on a future footer. We can't use multiple backgrounds because of browser support issues.
Example page: http://niklasholmberg.se/test.html

Answer 1

As others have pointed out, the problematic thing here is that your "right" column is taken out of normal flow and is therefore not actually part of the "page". Browsers are (IMO) correct in not painting the background all the way to the right in the "head"... but (again IMO) wrong in even allowing you to scroll to see the right column when it is outside the page bounds.
If you set overflow on the boby to hidden you solve the problem of the background... but of-course you don't make advertisers happy that way :)
Suggestion
Maybe it is enough to get what you need:
#fakebg {
position:absolute;
top:0;
width:1102px;
background:#000;
margin:0;
z-index:-1;
}
http://jsfiddle.net/Mfsx6/1/
In summary: I added a dummy div to the head with the same offset placement as the right column. This gives us a surface there to add a background to.

Answer 2

I think the problem you're having is not that the background doesn't run all the way. It's that the content DIV is being resized by your use of right:-200px; That essentially makes the content DIV 200px larger than it should be, pushing it outside of the BODY.
If you set #right to use right:0px; the problem no longer exists.
I'm not sure if that renders correctly for your needs though.
V.

Answer 3

Set the min-width value for the #head. For my resolution it is working perfectly with min-width:1102px.
try this out.

Answer 4

Going further on #Martin Westin's answer, to make it work for any size window dynamically:
I added a div with id = "full-width-bg" to the header where I needed the background to stretch all the way across. Custom.Toolbox.getFullWidth() gets the actual size of the DOM whether it is in the viewport or not, so it includes overflow and the entire width of the page. Then we set the width of #full-width-bg to the full width.
window.Custom = window.Custom || {};
Custom.Toolbox = {
init: function(){
Custom.Toolbox.fixBG('#full-width-bg');
jQuery( window ).resize(function() {
Custom.Toolbox.fixBG('#full-width-bg');
});
},
getFullWidth : function(){
return Math.max(document.documentElement["clientWidth"], document.body["scrollWidth"], document.documentElement["scrollWidth"], document.body["offsetWidth"], document.documentElement["offsetWidth"]);
},
fixBG : function(selector){
jQuery(selector).css('width', Custom.Toolbox.getFullWidth() + 'px');
}
}
jQuery(function(){
Custom.Toolbox.init();
});