Three Columns with Masthead and FooterAnother very desirable layout is a three-column layout with a masthead and a footer (see Figure 13-4). Figure 13-4. A sophisticated three-column layout with a masthead and a footer.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). Figure 13-5. A three-column, fixed layout with a masthead and a footer.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> NOTE "Containing Floats" is an excellent article on working with floats from CSS expert Eric Meyer; see http://www.complexspiral.com/publications/containing-floats/. |