HTML and CSS —

Nested Float

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).

Figure 13-6. Floated box within a content section.

Example 13-4 shows how this layout is achieved.

Example 13-4. Nested float layout
<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:


div id="content">
<div id="nav">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="poe3.html">Forward</a></li>
<li><a href="poe1.html">Back</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">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.
Figure 13-7. A nested float layoutsimple, but very useful.