Because the center
column has no faux background, this would result in a space
below the center column in the same way that there is space below
the side columns in the earlier examples. To ?¬? x this, we remove the
background color ?¬? ll from the content column and move it to the
background of the main_wrapper div, which is always the height of
the layout. With the side columns full length now, the only place the
main wrapper can be visible is in the content area??”just what we
need. (Alternatively, but not illustrated here, you could also add a
background image to main_wrapper, and have a faux column effect
on all three columns??”totally stylin??™!)
FIGURE 5.15 A three-column liquid
layout with faux columns from the
Stylib library.
STYLIN??™ WITH CSS - CHAPTER 5 164
The code changes to do this are:
body {background:#BB9;}
#main_wrapper {background:#FFF;}
#header {background:#DDC;}
#nav {background:#CCB;}
#content {background:#EED;}
#promo {background:#CCB;}
#footer {background:#DDC;}
Faux columns are a little time-consuming to execute, and if you
change the column sizes, you have to go back and rework the graphics,
but they let you create more interesting things than just solid
backgrounds and solve the full-length column problem very nicely.
Programmatically Extend Columns (and
Round Their Corners!)
Another way that you can have columns of equal length is to use
JavaScript to determine which of the columns is the longest and
have it match up to the length of the others.
Pages:
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207