HTML and CSS Reference
In-Depth Information
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).
Figure 4-15
Fixed and fl uid layouts
1280px
100%
FIXED
FLUID
256px
512px
512px
20%
40%
40%
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.
