)
There is a second style sheet linked to this page called text_n_colors.css, which
you can ?¬? nd in the Stylib library. This style sheet is used in every example in this
chapter. It sets colors of the backgrounds of the columns and styles all the text elements
on the page. By adding a class such as ???olive??? or ???lime??? to the body tag, you
can invoke one of the several different page color schemes included in this style
sheet??”in the examples where the markup doesn??™t have a class on the body tag
(such as the example above), then this style sheet??™s default color scheme is used.
I am not showing this style sheet here because it??™s not the focus of this chapter,
and with all the various color schemes, it is almost 400 lines of CSS. Anyway, the
focus here is the way in which CSS can be used to organize the page layout. Just
realize that the page colors and styles of the text come from the text_n_colors style
sheet, which we will look at in Chapter 7, and are not part of the page layout CSS
that follows.
end main wrapper
STYLIN??™ WITH CSS - CHAPTER 5 144
body {
text-align:center;
}
#main_wrapper {
width:840px;
margin-left:auto;
margin-right:auto;
text-align:left;
}
#header {
}
#nav {
width:22%;
?¬‚ oat:left;
}
#content {
width:78%;
?¬‚ oat:left;
top:0px;
}
#footer {
clear:both;
}
#header_inner, #nav_inner, #content_inner, #promo_inner {
over?¬‚ ow:hidden;
}
#header_inner {
padding:1em 2em;
}
IE6 needs this to center the layout
in the browser window
widths of columns will change
proportionately as this width is
changed
centers layout in browser
resets the centering hack for IE6 on
the body tag
this width + content width must
total 100%
?¬‚ oats on nav and content divs,
makes them sit side by side
this width + nav width must total
100%
?¬‚ oats on nav and content divs,
makes them sit side by side
makes the footer sit below whichever
column is longer
clips oversize elements that would
otherwise expand divs and break
the layout
creates space between the box and
the content
BASIC PAGE LAYOUT 145
#nav_inner {
padding:1em .
Pages:
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187