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

Three Columns with Masthead and Footer

Another very desirable layout is a three-column layout with a masthead and a footer (see Figure 13-4).

This layout uses floats, not positioning, to achieve the desired results (see Example 13-2).

Example 13-2. Using floats for layout

<style type="text/css">
#masthead {width: 768px;}
#nav {float: left; width: 200px;}
#content {float: left; width: 368px;}
#sidebar {float: left; width: 200px;}
#footer {width: 768px; clear: both;}
</style>

This is a fixed-width layout, which means that none of the columns will dynamically change width-wise. Notice how the columns are simply all floated to the left, placing them one after another along the horizon. You'll also note that the #footer div uses the clear property with a value of both. This ensures that the footer completely clears the floated columns (see Figure 13-5).

You can make a fluid version of this layout simply by using percentages instead of fixed widths (see Example 13-3).

Example 13-3. Using percentages to create a fluid version

<style type="text/css">
#masthead {width: 100%;}
#nav {float: left; width: 20%;}
#content {float: left; width: 60%;}
#sidebar {float: left; width: 20%;}
#footer {width: 100%; clear: both;}
</style>