CSS Templates

I've started to save some of the XHTML/CSS table-less layouts I've been used on sites at work, on volunteer projects such as aifia.org and iaslash.org, and on my personal sites. The strategies I've used have been learned by reading some of the usual suspects: Glish, Noodle Incident, CSS-Discuss and The Glasshaus CSS book.

Header, 3 column body and footer

  • Strategy #2, static positioning -- The strategy for this 3 column layout uses all static positioning. The three columns in the center are wrapped in a static #Main div. The three columns are created by floating #Left and #Right divs around the #Content div. Margin percentages are used to set horizontal alignment, and a .padder class is used to set up horizontal padding between elements. A .spacer div is used to create a vertical break between the #Main div and the #Footer div.
  • Strategy #1, mixed static and absolute positioning -- This is the basic 3 column layout used in aifia.org. The strategy uses static #Header, #Content and #Footer divs and absolutely positioned #Left and #Right divs. Unfortunately, with this strategy, if the #Left or #Right divs extends vertically past the #Content div, the #Footer can be obscured. Layout #2 above fixes this problem.
  • Strategy #1.1, mixed static and absolute positioning -- Sarah pointed out this strategy to me, which corrects the problem of overlapping the absolutely positioned #Left and #Right columns with the #Footer in strategy #1. It uses a method involving the Crossbrowser.com X library, as described by SitePoint.