Now, when the layout reaches either the stated minimum or maximum
width, it??™s as if the page has a ?¬? xed width applied to it. After
reaching minimum width, the right edge of the browser window
moves over the now-?¬? xed-width layout. Going the other way, after
the browser window goes beyond the layout??™s maximum size, the
layout gets no wider. Then our auto margins kick in again, and the
???max??™d out??? layout centers itself in the browser window as it did
with the ?¬? xed width version we looked at previously. Much nicer.
A couple more quick changes will ensure that only the content column
changes width.
#nav {
width:22%;
width:140px;
?¬‚ oat:left;
}
As in the ?¬? rst layout (and all of
them), you will need to use a script
tag in the header to link the minmax.
js ?¬? le from the Stylib library to
have auto-centering work in IE6.
sets maximum layout width
sets minimum layout width
I like to have to have a minimum of
six and a maximum of 15 words to a
line; you can play with the min/max
settings to get just the right range for
your pages. Note that if you set the
min and max widths in ems, then the
number of words per line is always
the same, even if the user scales the
overall font size.
the content margin must match
this value
STYLIN??™ WITH CSS - CHAPTER 5 150
#content {
?¬‚ oat:left;
width:78%;
margin-left:140px;
}
Because we have ?¬? xed the width of the navigation column, then the
only useable value for the content column, if it is to remain liquid,
is auto, which means as wide as the containing element??”in this
case main_wrapper.
Pages:
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195