css - 100% width bg images not extending on horizontal scroll

Question

I'm noticing this issue. I made a quick screen capture to demonstrate: http://dl.dropbox.com/u/904456/2010-06-14_2323.swf

Basically when you have a min-width set and the viewport goes under that constraint, a horizontal scroll bar appears. Pretty much what you would expect, but when you scroll over horizontally all elements that are suppose to extend across the entire width of the page and have background images/colors different from the body do not extend. If you resize the viewport it seems to catch up.

Is this a known issue? You can see it on a lot of sites, http://gowalla.com for example.

Any ideas?

Answer 1

I managed to solve this issue on gowalla and stackoverflow (it happens to the footer) by adding a min-width to the body element. I think that on your own site though, it would be better to apply it to a wrapper div that encompasses ALL of the page's content (including the footer).

You will need to set it's value to the minimum fixed width of the content, so if your main content div is set to be 960px wide, then that's probably what you want (but you may need to tweak to account for extra margins/borders etc).

Here's an example: http://jsfiddle.net/qUyp2/