Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript
Megnut

Web Topics
All Articles
Browsers
ColdFusion
CSS
Database
Flash
Graphics
HTML/XHTML/DHTML
Scripting Languages
Tools
Weblogs

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab






Introduction to CSS Layout

by Eric Costello and Apple Developer Connection
03/01/2002

There aren't many web developers who have not at least tried using Cascading Style Sheets (CSS) to define typography and simple page attributes such as background and text color. These days more and more developers are pushing CSS even further, eschewing tables and embracing CSS as a web page layout tool. In this article I'll explain why CSS is in many ways preferable to using tables for layout, and then I'll show you some CSS layout techniques using a complete re-coding of the Apple Internet Developer home page as an example.

This article assumes a familiarity with Cascading Style Sheets (CSS).

In this article

What is CSS layout?

CSS layout uses style sheets to define the placement of elements on a web page. Typically CSS layout replaces tables, which are currently the most popular method of placing page elements. There is a common misconception that CSS layout techniques are incapable of producing complex page layouts. While it is true that tables generally provide more flexibility, I will show you that complex layouts are quite possible with CSS.

To get a quick look at the nuts and bolts of CSS layouts, take a look at the markup of a 3 column liquid page layout with a header, first done with tables, then with CSS.

Markup of 3 Column Layout with Tables

This is the traditional method of web page layout, accomplished with a table. Notice that the content of the document (which is just dummy text) is interspersed with markup intended to define the content's visual presentation:

<html><head><title>Table layout</title></head><body bgcolor="white">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td colspan="3" valign="top">
  <font color="red" face="verdana, sans-serif">
  A banner that sits at...top of the page.
  </font>
</td></tr>

<tr><td width="190" valign="top">
  <font color="green" face="verdana, sans-serif">
  A column on ... left of the page.
  </font>
</td>

<td valign="top">
  <font color="blue" face="verdana, sans-serif">
  A column in ... center of the page.
  </font>
</td>

<td width="190" valign="top">
  <font color="orange" face="verdana, sans-serif">
  A column on ... right of the page.</font>
</td></tr></table>
</body></html>

Markup of 3 Column Layout with CSS

Notice that this markup is relatively uncluttered because I've removed the visual layout instructions:

<html><head><title>CSS layout</title>
<style type="text/css">
  @import url("threecolcss.css"); 
</style>
</head><body>
<div id="banner">
  A banner that sits at ... top of the page.
</div>

<div id="rightcontent">
  A column on ... right of the page.
</div>

<div id="leftcontent">
  A column on ... left of the page.
</div>

<div id="centercontent">
  A column in ... center of the page.
</div>
</body></html>

Of course you probably noticed the style element at the top of the markup which specifies an external style sheet for the example: @import url("threecolcss.css");. The style rules in that external document are as follows:

Pages: 1, 2, 3, 4

Next Pagearrow