HTML and CSS Reference
In-Depth Information
CHAPTER 7
■ ■ ■
CSS Layouts
F
or the longest time, the majority of web developers looked at CSS as something that was
useful primarily for maintaining a consistent look for typography across a web site and such
aspects as background colors, but not much else. At some point, people started to make
greater use of the styling of block-level elements—and by that we mean putting everything in
boxes with styled borders (some styles were more successful or tasteful than others!). This
practice was carried through to the early full CSS layouts. But the site that really showed that
a full layout with CSS was possible
without
being boxy and ugly was the famous CSS Zen Garden
(
www.csszengarden.com/
). Designer Dave Shea did a fantastic thing with that site by taking all
the theory and the practical-but-essentially-ugly examples of CSS and coming up with a hand-
ful of showcase CSS designs that proved what was possible; that handful of examples eventually
spawned hundreds of amazing entries.
Now we're at a stage in the game where true web professionals understand not only that
a CSS layout is possible to do (and do well) but also that it's a task they can carry out in a wide
number of ways. Each method has its fans and detractors, though, and no one method is right
or wrong; your decision obviously depends on the audience and content of your web site. In
this chapter we'll look at various CSS layout methods that are available to you as a web devel-
oper, and we'll assess the benefits of each method and the various “gotchas” that you may run
up against.
The Never-Ending Debate: What's the Perfect Page
Width?
Don't expect us to settle the debate of the perfect width here—we're going to sit on that
proverbial fence and simply present the evidence before you. Here are the issues:
•
Readability
: How easily can a block of text be read on screen, and what effect does
resizing the screen or font size have?
•
Adaptability/portability
: How easily can the design be used on a small screen (e.g.,
a small PC monitor or a device such as a PDA)?
•
Future maintainability
: The more technically clever the design, the greater the difficulty
in building something that another developer could later take on and support (if they
are not at the CSS ninja status that you are soon to achieve!).
111
