You can ?¬? x a div??™s height, but this is not
useful if the size or quantity of the content changes. You need to
STYLIN??™ WITH CSS - CHAPTER 5 160
keep ?¬‚ exibility in the page length so the page is as tall as it needs to
be to accommodate the content. So what we need is ?¬‚ exible height,
while still having all the columns appear to be the same height??”
and the operative word here is appear. All we need to do is create
the illusion that the columns are the same height. Here are the two
best ways to do that:
??? Faux columns??”Add a graphic to the layout??™s background that
is the same color and width of the columns, to create the illusion
that the columns extend right down the page.
??? Programmatically extend the divs??”Add a JavaScript that ?¬? nds
the height of the longest column as the page loads and instantly
sets the other columns to this height.
Let??™s look at the pros and cons of these two methods.
Faux Columns
The faux columns??™ method involves adding a background graphic to
the wrapper div of the page that is the same width and color as the
column we want to visually extend. Background images can be set
to repeat down the page, so that as the page height increases, the
graphic always repeats itself enough times to ?¬? ll the available space.
TWO-COLUMN LIQUID LAYOUT WITH FAUX COLUMNS
Let??™s use the ?¬? xed-width two-column liquid example we looked at
earlier in the chapter and visually extend the columns to full height.
Pages:
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203