Because we are absolutely positioning the three columns, and positioning
them on the page stating their left or right position (with
respect to their positioning context, mainwrapper??”see the CSS
below), it doesn??™t matter what order we state them in the markup.
It??™s as if we are pinning the columns next to each other to the page
at the speci?¬? ed point, like postcards on a corkboard, so the order in
which we do that doesn??™t matter.
BASIC PAGE LAYOUT 171
Here??™s the CSS that creates the page layout, with the all-important
positioning rules highlighted:
body {
margin:0px;
padding:0px;
text-align:center;
}
#main_wrapper {
width:880px;
margin-left:auto;
margin-right:auto;
text-align:left;
position:relative;
height:100%;
background-color:#585;
}
#header {
}
#content {
position:absolute;
left:130px;
padding:0;
width:600px;
}
#nav {
position:absolute;
left:0px;
width:130px;
background:transparent;
IE6 needs this to center the layout
in the browser window
sets maximum layout width
centers layout in browser
centers layout in browser
resets the centering hack for IE6 on
the body tag
full width by default
STYLIN??™ WITH CSS - CHAPTER 5 172
margin-bottom:300px;
}
#promo {
position:absolute;
right:0px;
width:150px;
background:transparent;
}
#footer {
}
#header_inner, #nav_inner, #content_inner, #promo_inner {
over?¬‚ ow:hidden;
}
#header_inner {
padding:1em 2em;
}
#nav_inner {
margin:1em 1.
Pages:
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213