Stylin' with CSS: A Designer's Guide 2nd Edition

Prev | Current Page 185 | Next

Charles Wyke-Smith

"Stylin' with CSS: A Designer's Guide 2nd Edition"

With these changes made, we now have a user-friendly ???liquid-butconstrained???
layout that we can use as the basis of a page design
(Figures 5.7??“5.8).
margin must equal width of nav
column
BASIC PAGE LAYOUT 151
FIGURE 5.7 With the min/max width
applied, the layout reaches a maximum
width and then centers itself in
the browser window.
FIGURE 5.8. Going the other way
with the min/max width applied, the
layout reaches a minimum width and
then gets no smaller; the browser
window now starts to cover it up.
A Three-Column Fixed-Width Layout
A ?¬? xed-width three-column layout works in the same way as the
two-column version. The only additional work is to add another
column div into the markup, ?¬‚ oat it like the other columns, and
then share the 100% width among the three columns to our liking.
Here??™s the new markup. The only thing that is different from the
two-column markup is the new promo div (highlighted) that follows
the content div (Figure 5.9).
STYLIN??™ WITH CSS - CHAPTER 5 152
Here??™s the associated XHTML:

Nav item 1

Nav item 2

FIGURE 5.9 A three-column ?¬? xedwidth
layout.

Pages:
173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197

An Account of the English Colony in New South Wales, Volume 2 (page 415) Danny's Own Story (page 149) Account of a Tour in Normandy, Volume 2 (page 311)

Electronic Books

Charles Wyke-Smith

"Stylin' with CSS: A Designer's Guide 2nd Edition"

The header area