HTML and CSS Reference
In-Depth Information
Figure 4-16
Comparing fi xed and fl uid layouts
Fixed Layout
Fluid Layout
Pros
✓
Pros
✓
Easier to use and maintain
✓
Easier for the user since it adapts to his or her
screen resolution
✓
Works better with fixed-size objects such as
images and embedded video clips
✓
All available screen space is used, allowing for
more content on larger monitors
✓
Unless the user's screen is extremely wide,
the page will still be readable
✓
Responds well to user-defined font sizes
✓
Can be used with more complicated page
layouts
Cons
✗
Maintains a consistent look across different
screen resolutions
Cons
✗
Can create excessive white space under
higher resolutions
✗
Testing is more involved as the designer must
confirm the layout works under a variety of
resolutions
✗
Doesn't react well to user-defined font sizes
✗
May result in overly wide lines of text, making
the page difficult to read
✗
Users with small screens may be forced to
scroll horizontally to view all page content
✗
Less adaptable to more complicated page
layouts
✗
Layout is less pleasing to the eye under higher
screen resolutions
Difficult to work with fixed-size objects such as
images and video clips
Many designers use a combination of fi xed and fl uid page elements, enabling them
to have the best of both worlds. Another approach is to use a script that queries each
browser about its screen resolution and then adapts the page to that resolution. Finally,
some designers propose the use of
elastic layouts
, in which all measurements are
expressed relative to the default font size using the em unit. If a user or the designer
increases the font size, the width, height, and location of all of the other page elements,
including images, change to match. Thus, images and text are always sized in proportion
with each other. The disadvantage to this approach is that since sizing is based on the font
size and not on the screen resolution, there is a danger that if a user sets the default font
size large enough, the page will extend beyond the boundaries of the browser window.
If you're new to Web page
design, try formatting the
initial draft of your page
using a fixed layout. Then,
once you have a work-
able page design, you can
change it to a fluid or an
elastic design.
Setting the Page Width and Height
Element widths and heights are set using the style properties
width:
value
;
height:
value
;
where
value
is the width or height using one of the CSS units of measurement or as a
percentage of the width or height of the containing element. The width and height mea-
sures only apply to the element content, not to the padding space, borders, or margins
around the element. Usually you do not set the height value because browsers automati-
cally increase the height of an element to match its content.
