HTML and CSS [Electronic resources]

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.

The reason floating was introduced in CSS at all wasn't for layout, per se. The intent was to be able to float elements, particularly images, and have content flow around the image (see 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 and the elements it contains are now floated to the right, just as the image would be. By doing this, you've actually created a floating navigation system that you can style to your heart's content.

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