A bug that can make a nice elastic layout "inaccessible".
In some browsers (i.e. Firefox 0.8) centered em-based layouts expand beyond both edges of the browser window when a user increases text-size. This will cause part of the page to move off the left edge of the viewport with no option for scrolling left to view it.
This is a test case
Why does it do this?
It is the use of "
margin:0 auto" that triggers this bug. The browser expands the whole layout dead center, without shifting it to the right once the left edge of the viewport is reached.
How can I fix it?
There are at least three ways to fix it (there are may be more):
body(matching the width of your wrapper)
paddingon the container
borderon the container
It's just too bad I found a fix for this bug only after most browsers got it right...