Floating Elements

As mentioned in the chapter's introduction, floating is not a positioning scheme. It gets confused with positioning sometimes because it can be used alone or with positioned boxes to create layouts.

Example 12-7).

Example 12-7. Floating an image

<style type="text/css">
img {
       float: right;
       padding: 15px;
       }
</style>

Figure 12-11 shows the results. I've added styles to spice up the look.

Just as you can float an img element, you can float any element. So, if your navigation is in a div and you want to float that element, you can do so (see Example 12-8).

Example 12-8. Floating a div

#nav {
          float: right;
          border: 1px solid red;
          padding-right: 20px;
          padding-top: 10px;
          margin-left: 10px;
          }

Figure 12-12 shows how the nav div

You can now quite easily imagine how floats can be used for laying out portions of a document.