CSS Layout Control

CSS positioning can transform old table-based designs into elegant CSS-based layouts. Authors have found that transforming their pixel-perfect tables into CSS layouts can mean big savings in bandwidth and maintenance costs. By breaking out of the fixed-grid tyranny of tables, you also gain the flexibility to repurpose your content. By shunting your presentation into style sheets, your code becomes pure structure surrounding content. Changing layouts site-wide is as easy as changing one style sheet. Transforming your content into media- or platform-specific versions takes only a different style sheet, not painful recoding.

Two and three-column layouts are popular choices, with Netscape 4 compliance a plus (and a challenge). Let's take a look at the sample three-panel layout in Listing 8.9.

Listing 8.9 Three-Column Layout: The Old Way

 <table>       <tr>             <td colspan="2">                   <p>top navigation bar (branding and advertising) </p>             </td>       </tr>       <tr>             <td>                   <p>left navigation bar</p>             </td>            <td>                   <p>main content area</p>             </td>       </tr> <table> 

In CSS, you use div s instead of table cells , as shown in Listing 8.10.

Listing 8.10 Three-Column Layout: The New Way

 <div id="adv">       <p>top navigation bar (branding and advertising)</p> </div> <div id="nav">       <p>left navigation bar</p> </div> <div id="main">       <p>main content area</p> </div> 

This is much cleaner code. Notice that the div s are named by function, not by location. Now let's add some CSS to position these elements (see Listing 8.11).

Listing 8.11 Three-Column Layout: CSS

 <style type="text/css"> <!-- div#adv {       background:#ccc;       width:auto;       margin:0;       padding:0.5em; } div#nav {       background:#ddd;       float:left;       width:25%;       margin-right:0.5em;       padding:0.5em; } div#main {       background:#0fc;       margin-left:25%;       padding:0.5em; } --> </style> 

The key elements for two and three-column layouts in CSS are float , margin-left , and right . The float moves an element to the left or right, and the other content "flows" around it. In this case, you float the navigation div to the left, set a width and some padding, and add a margin to the right for whitespace. For the main content div , you set its left margin to correspond to the width of the left floated element. That's all there is to it.

Raising Relevance

The higher your main content is in your HTML code, the better for search engine relevance. You can use CSS to replicate the table trick you learned in Chapter 4. In Listing 8.12, you see that instead of floating the navigation bar to the left, you float the main content div to the right and reverse the procedure.

Listing 8.12 Improved Three-Column Layout: CSS

 <style type="text/css"> <!-- div#adv {       background:#ccc;       width:auto;       margin:0;       padding:0.5em; } div#main {       float:right;       width:75%;       background:#0fc;       margin-left:0.5em;       padding:0.5em; } div#nav {       background:#ddd;       margin-right:75%;       padding:0.5em; } --> </style> 

Now you can flip the main and navdiv s in the HTML, pushing the main content earlier in the page (see Listing 8.13).

Listing 8.13 Improved Three-Column Layout: HTML

 <div id="adv">       <p>top navigation bar (branding and advertising)</p> </div> <div id="main">       <p>main content area</p> </div> <div id="nav">       <p>left navigation bar</p> </div> 

The page looks identical, but the main content area appears earlier in the code and also displays faster. If you want, you can take this to an extreme and absolutely position the main content area first; then include the advertising and navigation div s as before.

For More Information

See the following sites for more demonstrations of CSS layout techniques:

• http://www.alistapart.com A List Apart uses CSS-based layouts and teaches developers how to use them.

• http://www.meyerweb.com/eric/css/edge/ CSS Edge is Eric Meyer's standards-based CSS playground.

• http://developer.apple.com/internet/css/introcsslayout.html Introduction to CSS Layouts by Eric Costello.