HTML and CSS Reference
Fixed, Fluid, and Elastic Layouts
Web page layouts fall into three general categories: fi xed, fl uid, and elastic. A fi xed
layout is one in which the size of the Web page and the size of the elements within it are
set without regard to the screen resolution. A fl uid or liquid layout defi nes the size of the
page and its elements as a percentage of the screen width, meaning that a Web page and
its elements are wider on a wider screen (see Figure 4-15).
Fixed and fl uid layouts
Fixed layouts stay the same size
regardless of screen resolution.
Fluid layouts change with
the screen resolution.
The advantages and disadvantages of the fi xed and fl uid approaches are laid out in
Figure 4-16. In general, fi xed layouts are easier to set up and maintain, but they're less
pleasing to the eye when viewed on wider screens. A fl uid layout may be more diffi cult
to set up initially, but it's more adaptable to a market in which users access the Web from
a variety of devices and screen resolutions.