If your design calls for more graphical embellishments on the edges of the box, yet you still need the box to be expandable, then a slightly different approach is in order. This example produces the expanding box style shown in Figure 24-10.
Figure 24-10. Fancier box edges
To achieve graphic effects on all four sides of the box, we start with the set of images shown in Figure 24-11.
Figure 24-11. Image elements for the fancier box
In this example, the markup must provide five hooks for background
image styles. Instead of all
this time, we’ll take advantage of the existing
elements in the markup and add
only as needed. This is the markup used in the example.
<div class="sidebar"> <h2>Sidebar Title</h2> <div class="content"> <p>This is the content of the sidebar</p> <p>And a little more<br />content for good measure.</p> </div> <div class="footer"> <p>A paragraph containing author information</p> </div></div>
The style sheet that pulls it all together applies images to the
h2, and the paragraph (
p) in the article footer. The style sheet also
includes 2 em vertical margin shifts to compensate for a gap inserted by
carriage returns in paragraphs. This measurement may need to change based on the font size and line height in your content, so be sure ...