Bookmark this article at these sites:
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):
- Use
min-widthonbody(matching the width of your wrapper) body {min-width:34em;}- Use
paddingon the container #wrapper {padding-left:1px;}- Use
borderon the container #wrapper {border-left:1px;}
That's it!
It's just too bad I found a fix for this bug only after most browsers got it right...
