Variations on the 5-box 3-column layout

A 5-box 3-column layout, with banner, leftbar, article, rightbar, and footer

The 5-box 3-column layout

The 5-box 3-column visual layout for a web page is very common. It is used, with variations, by many of the on-line news sites in the world. It is used for many other purposes too.

It is very easy to layout a page like this using a simple table. It is just as easy whether the columns have fixed widths or variable widths. It is also easy enough to achieve a fixed-width layout without using a table. Flexible-width approaches tend to be harder without using a table. A lot of effort by experts has been devoted to achieving good methods.

Approaches that appear to have been less-well explored are the hybrid approaches. These use a tableless-layout for much of the layout, and a very simple table for part of it.

The purpose of these pages

The pages identified below are the result of a personal learning exercise. An objective was to identify a small set of useful options for future use. Another objective was to be able to compare approaches rationally, without distraction from the claims of the advocates of the various methods. And, finally, yet another was to learn a lot about CSS in the process.

An observation is that the advocates of various methods appear to take it for granted that all of the content for a particular layout should be in the (X)HTML document. But web sites using this layout may have an identical banner, an identical footer, and perhaps an identical leftbar, on many pages. Some alternatives, using "Frames", "iFrames", and "objects", are explored here.

Every page below has identical content in the banner. Identical content in the leftbar. And so on for the article, the rightbar, and the footer. So the only differences are the ways that these are combined, via mark-up and style-sheets, to build the display. Among other things, this enables numeric comparisons to be made, for example to identify the exact overhead of using a table for layout purposes. (Each page also has an "Explanation" box, nearly always at the top. This is not part of the target layout, but is simply a guide for the reader).

These layouts are not "pixel-perfect". They are experiments to see how different techniques behave. Little would be gained from making them visually identical to one-another. (Except, probably, to reveal more flaws in CSS Positioning!)


Discussion of different approaches

Fixed width versus flexible width

Most news articles that use variants on the 5-box 3-column layout are fixed width. They often need a viewport approaching 800 pixels wide to avoid a horizontal scrollbar. There are a few exceptions.

Flexible width layouts are what I personally wanted from this exercise. This typically doesn't mean getting down to (say) 200 or 300 pixels, because often some of the specific content needs this much width. For example, there may be buttons of about 180 pixels, or small photographs, or input forms. Those widths typically need special technology to cater for them well. But I especially want users to be able to exploit much wider viewports.

Mark-up and stylesheet techniques used

Implementing a fixed-width 3-column layout is a no-brain exercise. Who cares what technique is used?

Implementing a flexible-width 3-column layout where the width of each column is a percentage of the width of the viewport is also easy. It helps if the total percentages add up to just less than 100% to avoid rounding problems, but that is the only caution.

A more ambitious task is to implement a flexible full-width 3-column layout in which 1 or 2 of the columns have a fixed width. This is trivial with a layout table, but has exercised many minds to achieve it satisfactorily using CSS Positioning. I'm not convinced they have succeeded satisfactorily!

Another issue, especially for tableless layouts, is to get the right "linearisation" of the content. CSS Positioning using "float", for example floating the sidebars, normally needs the objects to be floated to appear in the document before the "normal flow" material such as the article. This can be inconvenient to people using non-visual browsers.


Colours

The examples here use colours in a way that a production web site wouldn't. This is simply to make it clear what is actually happening! Where are the boundaries of the boxes? Where are the boxes supplied by extra documents (such as "Frames", "iFrames", or "objects")? Where are the <table>s? Where are the <div>s? This helps to understand what is going on.

Here are the colours used in these layout examples:

Colour of separate banner document

Colour of separate leftbar document

Colour of separate footer document

Border of any of the 5 boxes

Border of <div>s other than boxes

Border of <table>s

 

Fixed width layouts

Using CSS Positioning

There are various techniques for this. This one floats all the columns into place. Others use absolute positioning.

Using hybrid & other techniques

The only purpose of this example is to introduce the idea of using hybrid techniques, where some layout tables are used within a basically tableless layout.


Max-width layouts

Using hybrid & other techniques

The only purpose of this example is to introduce the idea of using hybrid techniques, where some layout tables are used within a basically tableless layout.


Flexible width layouts

This is where things get interesting. These are trivial and robust using layout tables, and much harder and more variable using CSS Positioning. It is hard to know why anyone wouldn't use layout tables. What is the benefit?

Using layout tables

This is a fairly classic implementation. In the second case, both sidebars linearise after the article, using the "table trick".

Using CSS Positioning

One of these uses absolute positioning of the sidebars. Absolute positioning has its place, and can allow control over linearisation. But it has well-know disadvantages, such as "stacking" (superimposition of content over other columns, and indeed over the footer). I prefer techniques that use "float", because at least superimposition can be controlled. It can reduce the amount of pixel-counting too. Both of these let the centre-article come into place using normal flow with large margins to avoid the sidebars. (Without this, the article would flow under floated sidebars).

Using hybrid techniques

There is good reason to consider techniques where some layout-tables are mixed within a tableless layout (or vice versa). A couple of these just use single 1-row, 1-column, tables! That avoids the problem that Internet Explorer 5 & 6 don't support suitable CSS "display" properties to cause them to display as a column rather than flowing under the sidebars. But the layouts just above achieve the same using large margins.

Using multi-document techniques

Who says all the boxes need to be in the same document? Ideally they wouldn't be, and in future with xFrames perhaps they won't be. But at the moment these alternatives cause problems.


Conclusions

There are no final conclusions here. Any of these variations could have a use. They need to be evaluated against the requirements of the project concerned.

Some tableless-layout methods run into problems partly because of the immature support by browsers for positioning by CSS, hence incompatibilities between browsers. But a more important reason is that CSS1 and CSS2 were not really developed to layout pages like this. It doesn't appear to have been a development intention that they should eliminate the need for layout tables. If columns are put into place using absolute positioning, problems can occur with what comes below the columns. If columns are floated into place, then they don't hold their relative position at narrow viewports. This is an intention with floats, of course, but it can be a problem when laying out a page.

As a result of this experiment, I have decided to use simple layout tables where I want "utility" pages with "industrial strength" across platforms, browsers, and viewing conditions. And where I can tolerate things going a bit wrong in some conditions, I have decided to use a set of 2-column tableless layouts that have the ability for one of the columns to be further divided into 2, to provide a "sort of" 3-column layout. The latter are described below: