3_col_faux_art_left.gif 3_col_faux_art_right.gif
150 ?— 30 pixels 170 ?— 30 pixels
The left graphic is the width of the left column, 150 pixels, and the
right graphic is the width of the right column. We add the graphics
into two different wrappers??”the left one into the two-column
wrapper, and the right one into the three-column wrapper.
#threecolwrap {
?¬‚ oat:left;
width:100%;
background:url(../../../chapter_5/code/images/3_col_faux_
art_right.gif) repeat-y right;
}
#twocolwrap {
?¬‚ oat:left;
width:100%;
display:inline;
margin-right:-170px;
background:url(../../../chapter_5/code/images/3_col_faux_
art_left_blend.jpg) repeat-y left;
}
stops IE doubling margin on ?¬‚ oat
neg margin move
BASIC PAGE LAYOUT 163
The three-column wrapper extends the full width of the layout, so
we can use it to add the faux graphic for the right column, but we
must set the right setting to the background property to position the
artwork in the top right rather than the default top left of the container.
Also, these backgrounds don??™t have to be ?¬‚ at color??”any design that
can repeat vertically can be used, as the examples here illustrate.
Note that I set the background-color of the nav and promo columns
themselves to transparent so we see the faux column graphic??™s full
height (Figure 5.15).
Also, it??™s possible that the side columns might, if the page has very
little content, be longer than the center column.
Pages:
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206