Abstract and Status / 3 columns layout HowTo / References
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
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.
float
ing sectionsNote 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.
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:
import
rule to import the rules from another style sheet allows to keep away some of these browsersThese 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.
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: