Introduction to CSS Layout
by Eric Costello and Apple Developer Connection03/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?
- Markup of 3 Column Layout with Tables
- Markup of 3 Column Layout with CSS
- The relevant CSS
- Why Use CSS for Layout
- Benefits of CSS layout
- Problems with CSS layout
- Example: Re-coding the Internet Developer Home Page
- Conclusion and Resources
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:
