TJKDesign: Home Page

ez-css Putting the 'less' in table-less layouts. css-101 logo
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-width on body (matching the width of your wrapper)
body {min-width:34em;}
Use padding on the container
#wrapper {padding-left:1px;}
Use border on 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...