CSS: The Missing Manual

Tutorial: Multiple Column Layouts

In this tutorial, you'll create a multi-column, float-based layout. In the process, you'll create two- and three-column liquid designs, as well as a fixed-width design.

To get started, download the tutorial files located on this book's companion Web site at http://www.sawmac.com/css/. Click the tutorial link and download the files. All the files are in a ZIP archive, so you need to unzip them first. (Find detailed instructions on the Web site.) The files for this tutorial are in the chapter_11 → layout1 folder.

Structuring the HTML

The first step in creating a CSS-based layout is identifying the different layout elements on the page. You do this by wrapping chunks of HTML inside of <div> tags, each of which represents a different part of the page.

1. Open the start.html file in a text editor, and click in the empty line following the HTML comment: <!--sidebar goes here-->

   As you can see, some of the HTML work is already done: currently there's a banner and footer. Before you create any styles, you need to add the structure and content for the page. You'll next add the <div> tag for the left sidebar.

2. Add an opening <div> for the sidebar: <div id="sidebar">. Then press Enter (Return) to create a new, empty line.

   If you were creating a Web page from scratch, at this point you'd add the HTML for the page's sidebar, perhaps a list of articles on the site, links to related Web sites, and so on. In this case, the HTML's already taken care of. The code for an ...