Clint Eccher's latest book, "Advanced Professional Web Design: Techniques and Templates," goes into full detail of how to create CSS designs, including A5design's method of creating full-height three-column layouts. Following is an excerpt pulled from the introduction of one of the chapters and a link to such a sample design.

Excerpt from Chapter 9

For more than a decade, creating a three-column table-based layout in XHTML, where all three columns have the same color, has become an easily accomplished, widely used, technique. As one column is increased in height, the other two change, accordingly, maintaining the same colors. In CSS, however, it takes some maneuvering to modify the code because elements that are assigned absolute positioning or, are floated, fall outside the normal document flow, meaning they are not controlled by parent elements. Fortunately, there is a solution to this problem.
This chapter outlines the unique design structure A5design has created for its clients, building upon the core knowledge of many CSS gurus, including Eric Meyer, Big John, Holly Bergevin, and the group at www.alistapart.com. It is a simple, clean, hack-free solution that is used in many of the CSS designs included within this book. Following are some of the requirements it satisfies:
1. The design can be easily changed from a fixed to liquid design and vice versa. The design explained in this chapter was created for 1024x768 resolution.
2. A footer is included at the bottom of the three columns.
3. No matter the height of any column, the colors of all three columns will run from the top of the page down to the footer.

Sample Full-Height Three-Column CSS Design

Following is a design included and explained in the book. Click here to view the sample full-height three column CSS design live:

© copyright 1998-2007 | A5design, LLC | all rights reserved

Any unauthorized use or reproduction of any material contained in A5design.com without written consent is strictly prohibited