Tableless CSS 3-Column Layout: Float or Position?

Many Web sites, particularly content-heavy sites, have a preference to use a 3-Column layout. Usually navigation resides on the left side, content in the center, and advertising or company highlights on the right. Coders use several ways to achieve the 3 columns. One method is absolute positioning, however the 3-column layout can also be achieved through floats. We’ll examine both techniques here.

3-Column CSS Layout Using “position: absolute”

One popular way to achieve a tableless CSS 3-column layout is:

• CENTER column of fixed width has left and right margins
• LEFT column of fixed width absolutely positioned into the left margin of CENTER column
• RIGHT column of fixed width absolutely positioned into the right margin of CENTER column

In the HTML, the order of the DIV columns could be LEFT, CENTER, RIGHT, which is the most logical order possible for the code, at least from a Eurocentric point of view. Another possibility is CENTER, LEFT, RIGHT, which has apparent search engine optimization benefits in that content is pushed “higher” in the HTML.

An example of this code is “Glish’s Holy Grail”. This technique was one of the first widely adopted methods of achieving the 3-column layout. It was hailed as “the answer” to the 3-column question. However, it has a sore spot in its reliance on absolute positioning. Depending on the end use of the code it may not be flexible enough for one’s particular needs.

For example, if a client wanted to use a header of varying height above the 3-column layout, then absolute positioning of the layout would cause overlapping elements. Also, if the user increases his font size on a Holy Grail layout, code from the header may overlap the absolutely positioned columns below.

Because the LEFT and RIGHT columns have been taken out of the flow of the document through absolute positioning, this technique could result in overlap if, for example, a footer is used with this 3-column layout. To avoid this issue the CENTER column is required to always be the longest column in the layout, i.e., it should contain the highest amount of non-floated, non-positioned content.

3-Column CSS Layout Using Floats

An alternative to absolutely positioning the left and right columns is to use floats. With this technique the most appropriate layout is derived thus:

• DIV columns appear in the HTML as: LEFT, RIGHT, CENTER
• The CENTER column has a left and right margin
• LEFT column is floated into CENTER’s left margin
• RIGHT is floated into CENTER’s right margin

Drawbacks for this method are of minor impact:

• The HTML is not in the most appropriate order from a “code logic” standpoint.
• Current search engine optimization scuttlebutt indicates a page’s main content may benefit from placement as high in the code as possible
• Some CSS purists decry the use of floats in this manner
• Each floated column should be cleared so that any footer will not be overlapped

Benefits are that the design is more flexible in several ways:

• The header can be altered without concern for what lies below
• Text can be resized without overlapping elements as long as relative sizes have been used for containers
• Footer overlap is not an issue with this technique as long as the columns have been cleared properly

One other possible solution is to float LEFT, CENTER, RIGHT columns against each other with no margin on the center column. As long as the 3 columns remain in a container that is always wide enough to hold them, they will stay stacked side-by-side against each other. One benefit of this layout is that it moves the CENTER—most likely the content of the site—higher up in the code, which could be a boon for SEO efforts.

Best Tableless 3-Column CSS Layout

Overall, Brook Group leans toward floating the columns since it is the most flexible solution. However, a site that relies on heavy marketing efforts may enjoy the benefits of positioned columns since SEO improvements may be gained theoretically through “higher” placement of the site’s content. What turns out to be the “best” layout may depend on the site goals.