A very simple but useful layout is the nested float. This layout floats a box within the main content area. You can then use this box for navigation, imagery, or whatever your preference (see Figure 13-6).
Example 13-4 shows how this layout is achieved.
<style type="text/css">
#content {margin: 10px; border: 1px solid orange;}
#content #nav {float: right; width: 150px; border: 1px solid orange; margin-left: 5px;}
</style>
I gave the content a margin and a border so you can visualize it better. To achieve the nested float, I used a descendant selector of #content #nav and then floated the nav within the #content to the right. The margin-left value adds a little whitespace between the border and the text. A very important issue is that when you write the HTML for this (which you can see in the template itself), the nav div must be nested inside the #content div:
[View full width]div id="content"> <div id="nav"> <ul> <li><a href=">Home</a></li> <li><a href=">Forward</a></li> <li><a href=">Back</a></li> <li><a href=">About</a></li> <li><a href=">Contact</a></li> </ul> </div> <h1>The Black Cat</h1> <h2>By Edgar Allen Poe</h2> <p>I married early, and was happy to find in my wife a disposition not uncongenial with my
own. Observing my partiality for domestic pets, she lost no opportunity of procuring those of the <a href="http://vig.prenhall.com/">most</a> agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.</p> . . . </div>
As you can see in Figure 13-7, I used additional styles (as I have been doing) to achieve the decorative aspects of the design.