Setting a Maximum Page Width Using CSS

When designing a web site one of the first decisions to make is whether to use a fixed-width, liquid or other type layout.

Fixed-width designs are popular but have certain limitations. If you design for 800x600 your layout may look much too small at a higher resolution. If you design for 1024x768, lower resolution screens will require a horizontal scrollbar.

Liquid designs, although not the perfect solution, have less compromises. At very low resolutions they can become very difficult to read and at very high resolutions line lengths can become very long and also difficult to read.

A good compromise in my opinion is to use a liquid layout but set a limit to the width.

One method of doing this reliably on popular browsers is to use the following styling:

<div style="max-width:1004px;width:expression(document.body.clientWidth>1004?'1004px':'auto')">

In this case, the maximum width is set to 1004 (for 1024x768 screen resolution less 20px for the vertical scroll bar).