Creating Common Page Elements - Pro CSS Techniques - page 184

In the sample web page, we'll apply this to the related links section. Because this will be
constructed from a background image that is exactly 200 pixels wide, we need to make sure
that the containing div is also set to that amount (and, for that matter, the right margin for the
main page content):
body#cols3 #content-wrapper {
padding-left:9em;
padding-right:220px;
}
...
#related {
width: 200px;
}
The top image is set as a background for the related links heading (an h2 element), with
an appropriate amount of padding applied so that the text has some breathing space:
#related h2 {
margin: 0;
padding: 10px;
font-size: large;
background: url(top.gif) no-repeat;
}
The bottom part of the image is set on the outer container—the div with an id of
related —and anchored to the bottom. The heading stays at the top while the bottom part
moves up and down, accordion-style, depending on the amount of content inside:
#related {
width: 200px;
background:#013433 url(example1/bottom.gif) no-repeat bottom;
}
One minor cosmetic touch is still required—the text color needs to be white against the
dark teal:
#related,
#related a {
color:white;
}