Three Column Layouts
From CSS Discuss
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!- Bob Easton
Allyourcode 06:29, 3 May 2010 (UTC) Clearly, this wheel has been invented many (many) times. Why doesn't CSS have something for creating columns? (<- rhetorical question) This is obviously a very common pattern in graphical design. Maybe this will be solved in CSS3: http://www.w3.org/TR/css3-multicol/ . The cool thing about that spec is that it would allow you to do newspaper-style columns.
|Perfect 3 column liquid layout No Hacks! 2-1-3 Ordering. Full height columns.||Y||Y||Y||?||9, 10, 33|
|Relatively Simple Equal-height, fixed or fluid, cols. Elastic center. No Images.||Y||Y||Y||N||9, 10, 33, 38, 39|
|Position is Everything's One True Layout||Y||Y||Y||Y||9, 34, 35|
|rayRO's 3col bg, validating XHTML&CSS (no hacks!), 2-1-3 ordering||Y||Y||N/Y||N/Y||9|
|rayRO's 3col background-color Layout||Y||Y||Y||N||22, 32, 33|
|Rob Chandanais' Blue Robot "3 col Flanking"||N||p||Y||N||1,7,29|
|Eric Costello's glish.com "3 columns, the holy grail"||Y||N||N||N||1|
|Holly 'n John "Three Column Stretch"||Y||Y||Y||N||1|
|Mark Newhouse's nn4_3col_header||Y||Y||Y||Y||1,2,3|
|Owen Brigg's see multiple examples||N||N||Y||N||1|
|Dug Falby's A List Apart article||Y||Y||Y||N||10,30|
|Holly 'n John Source Ordered Columns||Y||Y||Y||N||12|
|Alex Robinson's one of several||Y||Y||Y||Y||11|
|Alex Robinson's Five Easy Companion Pieces 1 of 5||Y||Y||Y||Y||13,25|
|Alex Robinson's Five Easy Companion Pieces 2 of 5||Y||Y||Y||Y||13,25|
|Alex Robinson's Five Easy Companion Pieces 3 of 5||Y||Y||Y||*||13,25|
|Alex Robinson's Five Easy Companion Pieces 4 of 5||Y||Y||Y||*||13,25|
|Holly Bergevin's unique demo for Jonas||Y||N||Y||N||15|
|Holly 'n John 3 Col - Equal Height "Flag demo"||Y||N||Y||N||16|
|pixy's 3 Col - Equal Height with Footer (no hacks)||Y||Y||Y||N|
|Enzo's 3 Col Pixel Perfect w/header & footer||Y||Y||Y||N||19,25|
|Holly 'n John Ordered Borders Layout||Y||Y||N||N||22,25|
|Holly 'n John The Rigid Piefecta||Y||Y||N||N||22,25|
|Paul O'Brien's Three Equalizing Columns Layout||Y||Y||Y||N||23|
|Paul O'Brien's Three Equalizing Columns Layout PLUS Source ordering||Y||Y||Y||N||23,26|
|artiesten boeken Three Equalizing Columns Layout PLUS Source ordering||Y||Y||Y||N||23,26|
|Tonico's "Flexible Layout" with elastic behaviour||Y||Y||Y||N||26|
|Liam Delahunty's Centered layer - version 1||N||N||N||N||11,27|
|Ruthsarian Labs Skidoo - 3 Columns||Y||Y||Y||Y||31|
|Gavin Kistner's 3 Column Border Layout||Y||Y||Y||N|
|Ruthsarian Labs 3 Columns w/Footer||Y||Y||Y||Y||24|
|Alex Robinson's Liquid center and right||Y||Y||Y||Y||25,26|
|Web Ref 's Replicate front page tutorial||Y||N||Y||?|
|Peter Lambert'sInneroptics layout||Y||Y||Y||?||11|
|Thierry Koblentz' Liquid center (no hacks)||Y||Y||Y||Y|
|Thierry Koblentz' All Liquid (no hack)||Y||Y||Y||Y|
|Thierry Koblentz' float-less / clear-less layouts (fluid/fixed width/etc.)||Y||Y||Y||?|
|luci's 3 Cols Source Ordered Floating Layout||Y||Y||Y||N|
|Matthew Levine's ALA "Holy Grail" fixed sidebars, fluid center||Y||Y||Y||?|
|Ben Hirsch's 3 columns floated liquid center (no hacks)||Y||Y||Y||Y||9,11,33|
|Bob's Business News Blue 3 column widget ready||Y||Y||Y||Y|
|Chris Rowe's 3 column dynamic theme||Y||Y||Y||Y||20|
|css-petals.net's exhaustive collection of two- and three-column layouts||N||N||Y||N||22,33,37|
|Pagecolumn dynamical muti-column(1, 2, 3, 4,5) and grid layout generators in px, em and % unit.||Y||Y||Y||?||1|
|Pagecolumn grid layout generator||Y||Y||Y||?|
NN4=Y: Netscape Four 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:
- Central content column has large margins. Absolute positioned menu/sidebar columns sit in the left and right margins of the central column.
- Rightmost column is positioned absolute using a % distance from the LEFT so that it works in NN4.
- Needs, and includes, a script to reload the page when re-sizing Netscape 4.
- Each column is absolutely positioned and uses % widths.
- Illustrates the use of IE Conditional Comments to accommodate IE5. Explore!
- Uses HRs to force minimum widths in some browsers.
- Footer spans only the central content column.
- 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.
- All floats.
- Relative positioning
- Similar to #1, the central column provides wide margins to accommodate the side columns. However the side columns are not absolute positioned, but floated.
- 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.
- 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.
- 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.
- 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.
- 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.
- Elegantly simple. Perfect if you can do without a footer.
- Almost works in NN4. Body columns are OK, header and footer width truncated.
- Full width footers are difficult with flexible 3 col layouts. This one does it with interesting containers!
- Netscape4 OK as long as column 2 or 3 is longer than column 1.
- The latest from Douglas uses relative positioning, and features full background colors on all columns, header and footer. [Updated 14-8-2003 - cleaner code]
- Intriguing use of floats and negative margins. Study the code!
- 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.
- If right column is longest, borders won't reach all the way down.
- The center (content) column is/can be coded before the left and right columns in the (x)HTML. This method can help
- "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"
- Adds two side-by-side columns in the center column.
- Borders overlap other divs
- widths have Tantek hack & "be nice to Opera 5" rule
- Tutorials about layouts, actual layouts linked in the articles.
- Layout directory/links to additional variations
- Layout uses many position's, float's and requires Browser-Match
- All 3-column's got background-color...
- 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
- Netscape4 can be supported - but not right out of the box
- Column order changeable via body class; full width header/footer; columns adjust between 800 and 1024 widths.
- 1, 2 and 3 columns; fixed or fluid; same html, includes switcher
- Any order columns, fixed or fluid (%)
- 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))