Spring Into 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 ...