Question

When setting my header and footer to 100% I get some strange behaviour in FF4, Safari 5 and Chrome 12 on Mac OS X. If I have my browser window at a high resolution and scale it down horizontal scrollbars will appear, even though the content should scale with the browser window.

I saw this thread which seemed to have a similar problem, though the user never seemed to find a solution:
CSS 100% width on browser resize

Overflow-x doesn’t work for me as the error labels, which are absolutely positioned, will behave as fixed positioned.

DEMO here (errors on blur):

http://kassekladde.tixz.dk/kontakt-os/

Thanks in advance

Answer 1

The problem is caused by #overlay. You have set visibility:hidden. This hides the content but allows it to still take up space on the page. If you change it to display:none instead it will hide the content and the space it takes up, stopping the scrollbars in the process.

#overlayis dynamically given a width/height as the page shrinks. As you can see below it reached width:1711px at one point and so scrollbars appeared:

<div id="overlay" class="overlay" style="width: 1711px; height: 1489px; visibility: hidden; opacity: 0; position: absolute; background: none repeat scroll 0% 0% rgb(0, 0, 0); left: 0px; top: 0px; z-index: 5000;"></div>