As you can see in Figure 2.3, the background color of the nav column only extends as far as the content allows, whereas our original design calls for a full-length column.

We can circumvent this issue by adding a background image to the container element of the columns. This technique is described as faux columns, popularized in a well-known Alistapart article by Dan Cederholm.

Figure 2.3. The absolutely positioned layout in Firefox

In the case of our web page, the main div wraps all three columns, so we can add a background image to that element and position the image to appear behind the nav column—giving the appearance of a full-height column. The image also includes the dotted border that appears along the right-hand edge of the extras column. We achieve this effect in CSS by positioning the image shown in Figure 2.4 as a background image that repeats vertically.

Figure 2.4. The background image

All we need to do is add a couple of extra declarations to our style sheet:

#main {
  position: relative;
  background-image: url(images/main-bg.gif);
  background-repeat: repeat-y;
}

The result is the full-height column shown in Figure 2.5.

Figure 2.5. The finished absolutely positioned layout in Firefox

While all seems fine with the current layout, another problem arises if the content in the content column ends up shorter than the content of the nav column. As demonstrated in Figure 2.6, the footer will end up displaying across the content of all the columns instead of at the bottom of the page.

The reason for this problem is that absolutely positioning an element will remove it from the document flow. In our layout above, we’ve removed the two left-hand columns from the document flow and placed them on top of the other elements. The content and footer elements remain within the document flow, and are positioned by the browser under the content div.

Figure 2.6. The footer problem

To combat this problem, you can add a top margin to the footer element, or bottom padding to the content element, to ensure the footer is an appropriate distance from the content. Neither of these options are particularly desirable; ideally, we’d like our footer to sit neatly under our content. However, beggars can’t be choosers; if you can’t guarantee the amount of content in the main content column, you may need to consider these approaches.

Finally, if you view this layout in Internet Explorer 6, you’ll notice a big problem. The nav and extras columns aren’t positioned correctly, as you can see in Figure 2.7.

Figure 2.7. Layout problem in IE6

If we add the following width declaration to our style sheet, IE6 will be able to display our layout correctly:

#main {
  position: relative;
  width: 100%;
  background-image: url(images/main-bg.gif);
  background-repeat: repeat-y;
}

The above width declaration is in fact redundant, as we’ve also specified widths for all the columns; however, in this situation, it’s a safe way to correct the layout in IE6 without affecting the layout in any other browser.

If we test the layout after making those changes, we discover the disaster pictured in Figure 2.8.

Figure 2.8. Floated layout disaster

The biggest problem with floated layouts is the need to clear the floated elements, to stop elements following a floated element from wrapping around the floated element. As our columns are now floated—removing them from the document flow—the main div, having no other content, has no height or width. Consequently, the background image is no longer visible and the content of the footer is wrapping around the contents of the columns as it is supposed to do, being a non-floated element. There’s more detailed information about floating and clearing in the SitePoint CSS Reference.

There are various methods of clearing, but one of the most simple, reliable, and commonly used methods is to put a redundant div element under the columns that need to be cleared. First, we add an empty div element with a class value of clear just before the closing tag of the main div:

<div id="main">
  …
  <div class="clear">&nbsp;</div>
</div>

Next we add a CSS rule for the clear class:

.clear {
  clear: both;
}

The value both clears all the columns, whether floated left or right. Simply clearing the footer would solve the footer problem but still leave our background missing. This method enables us to add a footer and have it sit below whichever of the three columns is the longest, as shown in Figure 2.9.

Adding bits of redundant markup isn’t too much of a problem when you simply need to clear the three main columns of a layout. However, when using this technique on lots of small areas of a layout, this extra markup does add up to create a page that’s larger, more complicated, and harder to maintain than what’s ideal.

Figure 2.9. Floated layout disaster averted

For those interested in other options for clearing CSS floats without extra markup, a useful rundown of these techniques can be found on Robert Nyman’s blog. However, these other techniques can be complicated and have their limitations; this pragmatist has found that often the most robust method is the one outlined above—even if it does add a bit of “weight” to the page.

All this talk about clearing floats has also obscured the fact that the background image is still required to achieve a full-height column background, just as it was with the absolutely positioned layout. Also, we still require our width declaration for the main div element to make the layout work in IE6.

As we’ve seen, the current methods of laying out pages do have their problems. Developers can negotiate many of the problems by combining the two outlined methods in one layout—perhaps by using a floated main layout, but employing positioning for internal elements. However, just to achieve the relatively simple and common layout of three columns with a footer does require a good understanding of CSS positioning and the issues involved.

It’s no wonder that there’s a very vocal contingent within the web design community who have maintained throughout the rise of CSS-based layout that sticking with HTML tables is the easiest way to lay out a web page—just for the luxury of being able to set a background image on a column and have it extend all of the way down the page!

What is needed is a CSS technique that provides the simplicity of grid layouts with HTML tables, without having to use table markup.

These anonymous boxes are not created by magic, and they won’t automatically make up for any deficiencies in your HTML code. To be able to take full advantage of anonymous table elements, you’d best become familiar with the rules for their creation. If a layout calls for an implied element, the browser will create an anonymous box and set its CSS display property to one of table, table-row, or table-cell, depending on the context.

If you have an element that has been set to display: table-cell; but its immediate parent (the containing element) is not set to table-row, an anonymous box set to table-row will be created to enclose the cell and any subsequent adjacent sibling elements that are also set to table-cell, until it encounters an element not set to table-cell, so they’ll all end up in the same row. This is the case with the following markup:

<div class="cell">CELL A</div>
<div class="cell">CELL B</div>
<div class="cell">CELL C</div>
<div>Not a cell</div>

The three div elements above that have a class of cell are set to display: table-cell; and will appear side by side as though they’re in a single row table; the last div element won’t be included in the row, because it isn’t set to display: table-cell;.

If an element is set to display: table-row; while its parent element isn’t set to table (or table-row-group), an anonymous box set to display: table; will be created to enclose the row, and any subsequent adjacent sibling elements will be set to display: table-row. Also, if the element with display set to table-row lacks an element set to table-cell directly within it, an anonymous box set to table-cell will be created to enclose all the elements within the table-row element. Consider the following markup:

<div class="row">ROW A</div>
<div class="row">ROW B</div>
<div>Not a row</div>

The two div elements above with a class of row are set to display: table-row; and will appear one under the other as though they’re rows in the same single-column table. The last div element won’t be included in the implied table.

Similarly, if an element is set to any of the other display values that match elements which would naturally exist directly inside a parent table element such as table-row-group, table-header-group, table-footer-group, table-column, table-column-group, and table-caption, but does not have a parent set to display: table;, an anonymous box set to table will be created to enclose the element and any subsequent adjacent sibling elements with suitable display values.