Prev | Current Page 186 | Next

Charles Wyke-Smith

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

end header_inner
end header
end nav_inner
end nav
BASIC PAGE LAYOUT 153

A 3 Column CSS Layout

This page is styled...

Nav item 1

Nav item 2

This is the footer.

I didn??™t show the head of this document to save space, but it??™s identical
to the two-column ?¬? xed-width version above, except the ?¬? rst of
the two linked style sheets is called 3col_layout.css.
This style sheet contains the following CSS
body {
text-align:center;
}
content removed here to save trees
end content_inner
end content
end promo_inner
end promo
end footer_inner
end footer
end main wrapper
IE6 needs this to center the layout
in the browser window
STYLIN??™ WITH CSS - CHAPTER 5 154
#main_wrapper {
width:840px;
margin-left:auto;
margin-right:auto;
text_align:left:
}
#header {
}
#nav {
width:18%;
?¬‚ oat:left;
}
#content {
width:60%;
?¬‚ oat:left;
}
#promo {
width:22%;
?¬‚ oat:left;
}
#footer {
clear:both;
}
The highlighted code in the XHTML and CSS above are the only
changes you need to make to the two-column layout. If you understood
the two-column version, there isn??™t much more to say about
the three-column version.

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

Electronic Books

Charles Wyke-Smith

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

A 3 Column CSS Layout