Introduction

HTML is a structural language, which means
it is - or should be - used to add structure into a text through
tags. The table tag should then only be used to format
data into a table to relate columns with rows.

But since the apparition of tables in HTML, it has been very often
used for layout purpose, usually split a web page into
columns. Besides the fact that it breaks the meaning of HTML, it
doesn't help either in various cases that we could summarize by the
difficulty to parse or render a table in some context (disabilities,
view port restrictions, ...).

This document describes one way to create a 3 columns layout and
links to other layout techniques.

Layout description

The technique described below is the one used in the page for new W3C users and allows to build a 3
columns layout, with the following features:

the text in the center of the page is the one that comes first in
the code, which means that's the first to be read in non-CSS or
non-visual browsers

the left column and the right one follow in this order

It's ideal for homepages since it allows to have a complete text in
the center and nice lists of links on the side.

One of the restriction is that it won't work for too bad CSS
implementations, but it will degrade nicely into a traditional
vertical layout.

This layout is applied to this page itself so that you can get an
idea of what it produces.

Implementation

This layout uses CSS
absolute positionning. If we define 3 divisions on the HTML page
<div id="main">, <div
id="list1" class="link-list">, <div id="list2" class="link-list">, we can
apply then the following CSS rules on them:

/* Properties that both side lists have in common */
div.link-list {
width:10.2em;
position:absolute;
top:0;
font-size:80%;
padding-left:1%;
padding-right:1%;
margin-left:0;
margin-right:0;
}
/* we leave some place on the side using the margin-* properties */
#main {
margin-left:10.2em;
margin-right:10.2em;
padding-left:1em;
padding-right:1em;
}
/* and then we put each list on its place */
#list1 {
left:0;
}
#list2 {
right:0;
}

The idea is to crop the main division on the sides using the
margin-left and margin-right properties, and
then to position each side columns using
position:absolute, and set the top left corner and top
right corner coordinate to (0,0).

To prevent bad CSS implementations to read the stylesheet, just
call it through <style type="text/css">@import
url('your-stylesheet-url');</style>.