Creating Common Page Elements - Pro CSS Techniques - page 188

Figure 8-25. The jigsaw is nearly complete.
Keeping with the jigsaw analogy, isn't it annoying when you get to the end of putting the
puzzle together only to find there's a piece missing? We have a similar predicament here—
there is no element for us to attach the final piece to, so we have to create an element simply
for the purpose of hanging the background image on. It needs to be in between the outer con-
tainer div and the unordered list. Here's the markup with the new div added in:
<div id="related">
<h2>Related Links</h2>
<div>
<ul>
<li><a href="/related/">Related link</a></li>
<li><a href="/related/">Another link</a></li>
<li><a href="/related/">And another</a></li>
<li><a href="/related/">Related link</a></li>
<li><a href="/related/">Another link</a></li>
<li><a href="/related/">And another</a></li>
</ul>
</div>
</div>
The CSS to attach the final piece to the bottom-right edge follows. Figure 8-26 shows the
end result at various different font sizes to demonstrate the scaling ability.
#related div {
background-: url(example2/right.gif no-repeat right bottom;
}