Two and Three Column Webpage Layouts with CSS

Category: CSS
Reviewed by: swnesbitt   
Reviewed on: May 06 2004
» Discuss this topic ( Posts)

Ever since tables became a part of HTML they've been and incredibly popular way not just to format information but as a design tool. Countless Web sites use tables to define page layout. So, how can a Web author create dynamic looking pages without tables? By using Cascading Style Sheets (CSS).

This article looks at building two- and three-column Web pages using CSS. It assumes that you have a basic familiarity with CSS and, of course, knowledge of HTML.

Why CSS Instead of Tables?

It's easy to understand why someone would be leery of dumping tables for CSS. Tables are a proven quantity, they're familiar, and they're safe. Moving to CSS is a lot of work. While tables are great for creating cool layouts, they can also present accessibility problems.

The main problem is accessibility, especially for the blind. Most screen readers for the Web don't handle the content of tables very well -- instead of reading text from left to right, they read it downwards. The meaning of the text in the table will often be lost.

By using CSS, you can make changes to the look and feel of your Web pages without extensive re-coding. By changing a single CSS file, you can (for example) modify column widths, change fonts, and more. The changes are automatically reflected in the Web pages that use the CSS file.

Finally, you may see some increase in the speed in which a Web pages laid out using CSS renders compared to a page using a table layout. This is especially true for large tables. My own very unscientific tests have shown that CSS layouts load anywhere from 5% to 15% faster than table layouts.

Browser and Platform Considerations

CSS seems like the perfect solution to your Web design problems. While it's good, CSS isn't perfect. And that's because not all Web browsers support CSS in the same way. Some CSS-capable browsers only support a subset of the CSS specification, while other support most of it.

I've tested CSS table layouts in several Web browsers. I've found that the following browsers do the best job of rendering CSS in general, and CSS table layouts in particular:

  • Opera (Windows and Linux)
  • Mozilla (Windows and Linux)
  • FireFox (Windows and Linux)
  • Konqueror (Linux)
  • Safari (MacOS)

Internet Explorer for Windows also does a pretty good job, but I've never been overly impressed with Netscape's CSS support. But you still may run into trouble. Older versions of certain browsers -- especially Safari and Opera -- don't support CSS all that well. CSS-based layouts may not work properly or at all. For example, columns may run into each other or appear stacked on top of each other.