Perhaps the most common layout is three columns, typically with
left navigation, content in the middle, and the right column for what
I generically call promos??”the advertisements, links to other sites,
news headlines, and calls to action that frequently need a place
somewhere on the page. Here??™s a three-column product page on
Amazon.com, which puts the navigation in the header so it can use
two columns to tell you about the product and the third to help you
buy it (Figure 5.2).
Stylib ?¬? les can be found at: http://
www.stylinwithcss.com/stylib.
BASIC PAGE LAYOUT 137
FIGURE 5.1 The Jing blog uses a two-column liquid layout.
FIGURE 5.2 Amazon??™s three-column product page layout has a liquid center.
STYLIN??™ WITH CSS - CHAPTER 5 138
Four-column layouts can easily look cluttered and are more dif?¬? cult
to design successfully, but in the masterful hands of Jeffrey Zeldman
and team the understated four-column home page of A List Apart
(http://www.alistapart.com) looks clean and elegant (Figure 5.3).
FIGURE 5.3 A List Apart??™s four-column home page.
As illustrated in the examples above, virtually every layout, regardless
of the number of columns, has at the top a horizontal area,
commonly known as the header, that spans the width of the page.
The header??™s primary purpose is to present the brand identity of
the site so users know which site they are on, but it??™s also frequently
used for navigation elements, as the Amazon and A List Apart
screenshots show.
Pages:
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180