Now we will start to look at some more advanced CSS. You saw how
easy it was to convert a two-column ?¬? xed layout into a liquid layout,
but in order to create a three-column liquid layout, we have to get
very creative.
widths of columns will scale
proportionately if this width is
changed
centers max??™d layout in browser
centers max??™d layout in browser
prevents page inheriting IE6 centering
hack on body
no header styles yet
inner divs code removed below
here to save space??”same code as
in two-col version above
BASIC PAGE LAYOUT 155
A Three-Column Liquid Layout
Things get more complex if we want to add a liquid center to our
three-column layout, where the content area changes width as the
browser window is resized, but the side columns remain a ?¬? xed size.
As we have seen, it??™s simple to make a liquid content area with just
a left column because that left column never moves relative to its
reference point??”the top-left of its container. When there is a right
column too, it??™s a very different story, as the right column must constantly
reposition itself as the center column changes width, and
this turns out to be a complex thing to do with CSS. In fact, in 2004
Dave Shea, of Zen Garden fame, issued a challenge to see if anyone
could solve this problem??”one that had even him stumped.
CSS maven Ryan Brill quickly worked out the answer??”use negative
margins??”and his solution has become a CSS classic now used
in numerous liquid layout sites.
Pages:
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199