Second, just by adding auto left and right margins
to the main_wrapper div (see the code above), the layout centers
itself nicely in the browser window if the user makes the browser
window wider than the main_wrapper div; currently, 840 pixels.
creates space between the box and
the content
creates space between the box and
the content
creates space between the box and
the content
You can alter the proportional
widths of the two columns by changing
their width percentages; just be
sure to make the two column widths
total 100%.
STYLIN??™ WITH CSS - CHAPTER 5 146
Know Your Inner Div
The other things I??™ll note before we get into the content for this page
are the inner divs. In the style sheet, the CSS for these inner divs is
at the end, after the main CSS for the page layout. I demonstrated
the usefulness of inner divs in Chapter 4. Although they add a little
extra markup, I believe they greatly simplify styling and modifying
your layout, as they solve all the commonly encountered box model
problems of columns getting larger as you apply margins, borders,
and padding.
I like to use inner divs on the elements that have critical widths
associated with them. If I don??™t, every time I add a one-pixel border
around that div, I have to remember to subtract two pixels off the
stated width (left + right) in order to keep the div??™s width constant.
Pages:
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189