CSS Cookbook, 2nd Edition

Chapter 9. Page Layouts

Introduction

One of the last frontiers in CSS-enabled design was creating the page layout.

For a long time, web developers have been using HTML tables to create their layouts, often nesting tables to create multicolumn, multilevel layouts. Nested HTML tables render well in older browsers like Netscape Navigator 4 where CSS support, if present, is barely noticeable.

HTML tables and other HTML elements, however, should be tools used to mark up content and not used to construct unwieldy page layouts. The ideal solution is to have HTML represent the structure of the content at an intellectual abstract level and let CSS determine how to present the content.

This approach of letting CSS do the heavy lifting brings many advantages. Meaningful content that was once trapped under so many nested tables and images is now placed within meaningful heading and paragraph tags, so search engine rankings improve.

Also file sizes diminish noticeably as do maintenance headaches. Launching a complete redesign of a web site becomes a snap with CSS, when it used to take hours and sometimes days with HTML tables.

This chapter discusses the many ways in which you can create column layouts—including simple one-column layouts, four-column layouts, and everything in between.

Building a One-Column Layout

Problem

You want to build a layout that consists of one main column, as in Figure 9-1.