The question of finding good 3 column layouts comes up in the mail list from time to time. Here are some that I have found, along with a few notations about what features they include and how they work. The judgment of "good" is left to you and your needs. Each offers interesting techniques for the CSS student. By the way, when visiting these, look around; many of these people offer other layouts that I have not included here.

I'm sure there are more that I have missed. Add the others you know, or mail me and I'll add them. Of course, don't hesitate to mail me about any errors or misrepresentations I've made.

- Enjoy!- BobEaston

layout headerfooterfluidNN4notes
[Perfect 3 column liquid layout] No Hacks! 2-1-3 Ordering. Full height columns.YYY?9, 10, 33
[Relatively Simple] Equal-height, fixed or fluid, cols. Elastic center. No Images. YYYN9, 10, 33, 38, 39
[Position is Everything's] One True LayoutYYYY9, 34, 35
[rayRO's] 3col bg, validating XHTML&CSS (no hacks!), 2-1-3 orderingYYN/YN/Y9
[rayRO's] 3col background-color LayoutYYYN22, 32, 33
[Rob Chandanais'] Blue Robot "3 col Flanking"NpYN1,7,29
[Eric Costello's] glish.com "3 columns, the holy grail"YNNN1
[Holly 'n John] "Three Column Stretch"YYYN1
[Mark Newhouse's] nn4_3col_headerYYYY1,2,3
[Owen Brigg's] see multiple examplesNNYN1
[Dug Falby's] A List Apart articleYYYN10,30
[Holly 'n John] Source Ordered ColumnsYYYN12
[Alex Robinson's] one of severalYYYY11
[Alex Robinson's] Five Easy Companion Pieces 1 of 5YYYY13,25
[Alex Robinson's] Five Easy Companion Pieces 2 of 5YYYY13,25
[Alex Robinson's] Five Easy Companion Pieces 3 of 5YYY*13,25
[Alex Robinson's] Five Easy Companion Pieces 4 of 5YYY*13,25
[Holly Bergevin's] unique demo for Jonas YNYN15
[Holly 'n John] 3 Col - Equal Height "Flag demo" YNYN16
[pixy's] 3 Col - Equal Height with Footer (no hacks) YYYN
[Enzo's] 3 Col Pixel Perfect w/header & footer YYYN19,25
[Holly 'n John] Ordered Borders LayoutYYNN22,25
[Holly 'n John] The Rigid PiefectaYYNN22,25
[Paul O'Brien's] Three Equalizing Columns LayoutYYYN23
[Paul O'Brien's] Three Equalizing Columns Layout PLUS Source ordering YYYN23,26
[artiesten boeken] Three Equalizing Columns Layout PLUS Source ordering YYYN23,26
[Tonico's] "Flexible Layout" with elastic behaviour YYYN26
[Liam Delahunty's] Centered layer - version 1 NNNN11,27
[Ruthsarian Labs] Skidoo - 3 Columns YYYY31
[Gavin Kistner's] 3 Column Border Layout YYYN
[Ruthsarian Labs] 3 Columns w/Footer YYYY24
[Alex Robinson's] Liquid center and right YYYY25,26
[WebRef's] Replicate front page tutorial YNY?
[Peter Lambert's]Inneroptics layoutYYY?11
[Thierry Koblentz'] Liquid center (no hacks) YYYY 
[Thierry Koblentz'] All Liquid (no hack) YYYY 
[Thierry Koblentz'] float-less / clear-less layouts (fluid/fixed width/etc.) YYY? 
[luci's] 3 Cols Source Ordered Floating Layout YYYN 
[Matthew Levine's] ALA "Holy Grail" fixed sidebars, fluid center YYY? 
[Ben Hirsch's] 3 columns floated liquid center (no hacks) YYYY9,11,33
[Bob's Business News Blue] 3 column widget ready YYYY 
[Chris Rowe's] 3 column dynamic theme YYYY20
[css-petals.net]'s exhaustive collection of two- and three-column layoutsNNYN22,33,37
[Pagecolumn] dynamical muti-column(1, 2, 3, 4,5) and grid layout generators in px, em and % unit. YYY?1
[Pagecolumn] grid layout generator YYY? 
layout headerfooterfluidNN4notes

NN4=Y: NetscapeFour displays a facsimile of the visual design. Results vary.

NN4=N: Netscape 4 displays a text only version of the design.

NN4=?: Netscape 4 results not known. Please test in NS4 (if you have it) and update the table

NN4=*: See the note for this entry.

NN4=S: Some of the entries in the collection are Netscape 4 friendly.

Notes about technique:

  1. Central content column has large margins. Absolute positioned menu/sidebar columns sit in the left and right margins of the central column.
  2. Rightmost column is positioned absolute using a % distance from the LEFT so that it works in NN4.
  3. Needs, and includes, a script to reload the page when re-sizing Netscape 4.
  4. Each column is absolutely positioned and uses % widths.
  5. Illustrates the use of IE Conditional Comments to accommodate IE5. Explore!
  6. Uses HRs to force minimum widths in some browsers.
  7. Footer spans only the central content column.
  8. Absolute positioned central content column has a large left margin. The absolute positioned left columns sits in the left margin of the central column. The right column is defined as in note #2.
  9. All floats.
  10. Relative positioning
  11. Similar to #1, the central column provides wide margins to accommodate the side columns. However the side columns are not absolute positioned, but floated.
  12. All floats, this time with containers. A floated div is used to hold one or more floated divs. The footer always stays where it belongs.
  13. Alex expands on Big John's Source Ordered Columns with a 5 variants. Some work well with NN4. Versions 4 and 5 work only partialy with NN4.
  14. An outer container, positioned relative, holds the inner columns. Columns may be ordered in any order, displayed in any order and any column may be the longest. NB: If you want a footer you must be able to guarantee the longest column.
  15. Many interesting techniques, including clipping of the header to fit within the viewport without horizontal scrollbars, columns that position themselves relative to the height of the header, and a central wrapper accommodating floats within. Complex, but incredibly flexible, and beautiful too. Well worth the study.
  16. They said it couldn't be done. Working around BG image problems is one of the keys. Study the page and its source very closely.
  17. Elegantly simple. Perfect if you can do without a footer.
  18. Almost works in NN4. Body columns are OK, header and footer width truncated.
  19. Full width footers are difficult with flexible 3 col layouts. This one does it with interesting containers!
  20. Netscape4 OK as long as column 2 or 3 is longer than column 1.
  21. The latest from Douglas uses relative positioning, and features full background colors on all columns, header and footer. [Updated 14-8-2003 - cleaner code]
  22. Intriguing use of floats and negative margins. Study the code!
  23. Any column longest, with or without borders. Footer at bottom of window (for short documents), or at bottom of document. Here again, negative margins are at work. The side columns are fixed width and positioned as floating. Then, they are positioned by using negative margins that are (critically important) 1 px less than their width. This is the mechanism for having the footer clear all floats.
  24. If right column is longest, borders won't reach all the way down.
  25. The center (content) column is/can be coded before the left and right columns in the (x)HTML. This method can help
  26. "columns can be included in any order" "Positioning is not very precise" "Any footer required needs to placed at the end of the central column"
  27. Adds two side-by-side columns in the center column.
  28. Borders overlap other divs
  29. widths have Tantek hack & "be nice to Opera 5" rule
  30. Tutorials about layouts, actual layouts linked in the articles.
  31. Layout directory/links to additional variations
  32. Layout uses many position's, float's and requires Browser-Match
  33. All 3-column's got background-color...
  34. Columns may be displayed in any order, the columns can be made the same height without having to use faux columns and provides vertical grids ie. elements in each column can be aligned vertically within the column. Plus the same techniques can be applied to any number of columns
  35. Netscape4 can be supported - but not right out of the box
  36. Column order changeable via body class; full width header/footer; columns adjust between 800 and 1024 widths.
  37. 1, 2 and 3 columns; fixed or fluid; same html, includes switcher
  38. Any order columns, fixed or fluid (%)
  39. Same technique can be applied to obtain less or more than 2 or 3 columns

More information on applied 3CL can be found on Paul Phifer