1. Home
2. Developer Center
3. Dreamweaver Developer Center
4. CSS Advisor

CSS Advisor

Elastic layout bug

Problem

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.

Solution

Use min-width on body or apply padding or border to the container itself.

Detailed description

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.

Solutions:

1. Use "min-width" on body (matching the width of your wrapper - 34em here)

body {min-width:34em;}

2. Use padding on the container

#wrapper {padding-left:1px;}

3. Use border on the container

#wrapper {border-left:1px;}

Live demo:

View Live Demo

Text ID: ELASTIC_LAYOUT_BUG

---