FIGURE 5.5 Here??™s our ?¬? rst step in
converting the ?¬? xed width layout to
a liquid layout. As the browser width
changes, the width of the columns
changes proportionately. Note, however,
that when the browser window
is wide, the line length can get too
long for easy readability.
There is a major user experience problem with the layout as it
stands at this point, and it??™s one that goes un?¬? xed on many liquid
layouts: The browser window dictates the width of the layout,
BASIC PAGE LAYOUT 149
however absurd the visual result may be, as illustrated in Figures
5.5 and 5.6. The liquid page can get crushed down to a point where
the line length of the content is just a few words, or almost worse,
the page can be so wide on a large monitor that when you read to
the end of one incredibly long line, your eye can??™t ?¬? nd its way back
to the start of the next. Also, you usually want only the content column
to change width, not the navigation column. Let??™s look at how
we can improve our new liquid layout to ?¬? x these issues.
Use a Little Constraint
The CSS properties max-width and min-width do as their names suggest
and allow you to set how large or small respectively an element
can become. By adding these properties to the main_wrapper, we
can constrain our page to only be liquid between a certain range of
values, like this
width:840px;
max-width:960px;
min-width:720px;
We are stating here that the layout can expand or contract 120 pixels
from our previous 840-pixel ?¬? xed width, but no more.
Pages:
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194