overflow-x: auto problem on firefox/ie

i have this problem with my website css overflow-x:auto ; coincidently, when i try on stackoverflow.com . I can see stackoverflow also have similar problem. when i try to make my firefox/internet explorer 7 browser window screen smaller. i can see part of the screen on upper right hand-side and lower right hand-side not render properly. Is this because of overflow-x:auto?

i attached screenshot (screenshot 1, the upper right hand side ,header not render properly)

http://img12.imageshack.us/img12/43/stackoverflow2.png

(screenshot 2, the lower right hand side ,grey color not render properly)

http://img204.imageshack开发者_Go百科.us/img204/4539/stackoverflow1.png

how to fix this problem? if able to fix this problem, as well able to fix my our website problem.

No this isn't specifically an overflow-x: auto problem. It is is caused by elements with width: 100% interacting with fixed width elements elsewhere on the page. In the case of SO's #footer, it is width: 100% (implicitly), whereas the #content is declared width: 960px.

When the page width shrinks below 960px, the #content's width forces the browser to add a horizontal scrollbar (implicit overflow-x: auto). Since the #footer is set to 100% width, it only expands to 100% of the viewport, and the section beyond the scrollbar doesn't get the background color properly added.

To fix this, you can add a min-width declaration to the css:

#footer {
    min-width: 960px;
    /* other css goes m'ere */
}