W3C | Tutorials @ W3C

W3C Home Page Table-less Layout

Abstract and Status / 3 columns layout HowTo / References

Abstract and Status

In 2002, W3C designed a new layout for its home page using CSS techniques instead of the less usable table-based layout. While most of the modern standard-compliant browsers will parse and understand correctly this layout, the W3C Communication Team has done its best to give to older or less featured browsers a good experience by using the adaptability and scalability of CSS.

This document describes how this has been achieved and tries to document the most common questions that this layout has generated. Please send your questions and comments to the publicly archived mailing-list site-comments@w3.org

3 columns CSS layout

To build a 3 columns CSS layout, there are 2 most common solutions: using absolute positioning (this is the solution used and described in another CSS layout HOWTO) and using floating sections, which is the solution implemented in the home page.

Using floating sections

Note that in some browsers, the float property is not implemented or not properly, which means that the layout won't be in columns in the rendering they'll make of the home page. For sake of simplicity, we'll still refer to the different parts of the layout as left, middle and right columns, even if it's not universally true.

Using floating sections implies that the columns are generated in the same order as they are coded in HTML: the left column comes first, then the middle one, and the right one.

The left and the right columns share the same functionality: navigation blocks; for this reason, they share the same class (class="navBlock"), which allows to make them share most of their appearance properties. The following CSS rules set the background and text colors, set the width of each side column to one quarter of the width of the page and add a black solid border. And more importantly, it sets the float property to left, which indicates that the section will stay as near as possible on the left of the page.

.navBlock {
   background: #eec;
   color: #000;
   float: left;
   width: 26%;
   border: none;
}

It may seem strange to have the right column set to stay on the left, but taking a look at the rules for the middle section will help understanding this. The middle column contains the news items: we assign it the class value newsBlock and set the following rules:

.newsBlock {
   background: #fff;
   color: #000;
   float: left;
   width: 46%;
   margin-bottom: 0;
   border-left: 1px solid #000;
   border-right: 1px solid #000;
   border-bottom: 1px solid #000;
}

Again, the appearance is set with a white background, black text, approximatively half of the page size in width, a black thin border. The float property is set to left also; having the 3 sections with a left floating ensures that they build the 3 columns layout: the left column is as much as possible on the left, then comes the middle column that stays as much as possible on the left, which means at the right of the left columns, and the same thing happens to the right column.

Sorting incomplete float CSS implementation from others

Since some browsers have an incomplete or buggy implementation of CSS floating, it is necessary to distinguish which rules are for the complete browsers from ones that are from the others.

CSS doesn't provide a standard way to distinguish the level of implementation, so some heuristics rules are used to do that:

These rules are not guaranteed to work well in any browser: we are interested in your experiences with your browser and will try to document and apply as many other solutions that allow most of our visitors to have a pleasant navigating experience.

Results

The resulting style sheets from this design are as follow:

Here are some screen shots of the resulting looks in a non-float aware browser and in a float aware one:

Screen shot with CSS float enabled (click on the image to enlarge: 136K)
Screenshot of the home page layout with CSS float enabled
Screen shot with CSS float disabled (click on the image to enlarge: 44K)
Screenshot of the home page layout with CSS float enabled

References


Dominique Hazaël-Massieux <dom@w3.org>
Created 2002-11-22, Last Modified: $Date: 2006/01/05 02:13:27 $