On the main_wrapper div, make the following incredibly simple
change:
width:840px;
Creating a liquid layout from the ?¬? xed-width layout is easy. Simply
deleting the width:840px; setting from the main_wrapper, the layout
instantly changes width as the browser window width changes. The
now undimensioned main_wrapper springs to the full width of its
parent, body, which is by default the full width of the browser. As
both columns are sized in percentages, they now both change size
proportionately with any changes in the browser window width, and
???liquidness??? is attained. Note the auto margins do nothing now, as
If I had added the three-pixel red
border to the nav div itself, the layout
would then be 100% (which the
browser calculates from the parent
element, so it equals 840 pixels) + 3
more pixels. This makes the layout
too wide to ?¬? t the wrapper, so the
?¬‚ oating content column then moves
under the nav. Try temporarily moving
this border style from nav_inner
to nav to see what I mean.
STYLIN??™ WITH CSS - CHAPTER 5 148
the layout always ?¬? lls the available horizontal space in the browser
(Figures 5.5??“5.6).
FIGURE 5.6 When this same twocolumn
liquid layout is displayed
in a narrow browser window, the
content gets crushed down??”the line
lengths are absurdly short, and the
navigation links are almost entirely
obscured.
Pages:
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193