5.5. Basic Three-Column Layout

The sample site for this book, Footbag Freaks, uses a combination of a three-column layout with a header at the top and a footer at the bottom. This is a classic Web page design. Some have even called it "the Holy Grail" when it includes a fluid center column. The first place I saw this reference was on Eric Costello's Website, http://www.glish.com/.

To understand the CSS involved in creating this basic page layout, let's start by looking at the core code for building a three-column layout with a mixture of fixed and flexible column widths, commonly known as fluid layout (see the sidebar below for details). Then, we'll add the top-level header area, and a footer. In Chapter 6, we'll learn a few more advanced ...

Get HTML Utopia: Designing Without Tables Using CSS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.