Introduction

One of the last frontiers in creating a truly CSS-enabled presentation is the 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 and is mostly wrong. If your audience uses an older browser and visual presentation is a key component of the site's success, you should consider using HTML tables.

However, if your audience uses a browser that supports CSS, you should use CSS to design your layouts. As a design language, CSS is focused on presentation, which includes helping web developers control the layout of their pages. HTML tables and other HTML elements, on the other hand, are tools you use to mark up content. The ideal is to have HTML represent the structure of the content at an intellectual abstract level and CSS say how to present it for a particular device.

Furthermore, with CSS you diminish file sizes and maintenance headaches. For example, by stripping away presentational markup and moving a design to CSS, you can reduce the file size of a web page tremendously. And once the design is in CSS syntax, creating site-wide changes becomes a snap.

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. It also explains how to start working with CSS if you still need to build a site using HTML tables and you want to use CSS just to help with the layout chores.