5em .5em 1em 1em;
}
What I have done in the last two pieces of code is add 15 pixel margins
to each side of the three divs that contain the graphics for the
rounded box (highlights). This centers the composited box in the
200 pixel wide column??”the box is 170 pixels wide and there are 15
pixels of margins each side. So now the inner div is exactly the same
width as the rounded box in its background, and I can add 6 pixels
of horizontal padding to each side of the innerdiv to ensure the
content does not extend out to the edge of the box.
Now as we add content to the inner div, its background repeats to
?¬? ll it, and the bottom curve of the box gets pushed down to always
snugly sit below it. As the second graphic shows, no matter how
much content we add to the inner div, the box expands to accommodate
it (Figures 7.15A and B). The key to this effect is the repeat-y
on the CSS of the background graphic for the inner div, which causes
the background graphic to repeat as many times as needed, and the
top and bottom graphic elements sandwich it snugly to form the
rounded corners.
both divs have the same styles
keeps same styles as before
STYLIN??™ WITH CSS - CHAPTER 7 262
FIGURES 7.15A AND 7.15B The
top, middle, and bottom graphic elements
now touch and appear to be
one graphic. In the right screenshot,
I temporarily duplicated the content
to show how the box expands as the
content increases.
Pages:
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303