HTML and CSS [Electronic resources] نسخه متنی

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

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 th176 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="hom176">Home</a></li>
<li><a href="poe3l">Forward</a></li>
<li><a href="poe1l">Back</a></li>
<li><a href="abou191">About</a></li>
<li><a href="contac191">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 >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.