8em;
border-right:3px solid #B33;
}
#content_inner {
padding:0 1em 1em 1.5em;
}
#footer_inner {
padding:.5em 1em;
text-align:center;
}
Without this CSS, the four main divs (highlighted in the XHTML)
would be stacked one above the other across the width of the
browser by default. The CSS that converts that default arrangement
into the two-column layout is simply the ?¬? ve lines highlighted in the
CSS above. The nav and content divs are ?¬‚ oated, which will make
them sit side-by-side, and each has a percentage width applied to it
that together totals 100% so they are the same width as the header
and footer.
The footer has a clear:both rule to ensure that it sits below whichever
of the two columns is longest as determined by their content.
Document ?¬‚ ow does all the rest of the work for us??”the header and
footer are by default the full width of the main_wrapper containing
element.
As its name suggests, the main_wrapper div encloses the entire layout,
and I have given it an arbitrary width of 840 pixels. This div sets
the overall width of the layout because it??™s the parent of the four
divs, and therefore its width determines the width of the footer, the
header, and the combined width of the columns. The beauty of this
arrangement is two-fold. First, by simply adjusting the width of the
main_wrapper div, we can modify the overall layout width (the elements
inside change size proportionately, and their code doesn??™t
have to change).
Pages:
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188