Three Column CSS Layout: Centered and Fixed-Width

This technique may not be news to anyone, but it was a good learning experience for me. I worked with my friend Steve Hardin to create The Thread website for our upcoming art night. Steve is an awesome designer, with a very distinctive style that lends itself to the web readily.

Steve handed me an initial layout, which used tables to hold his stunning imagery at pixel-perfect attention. I assume it was the product of Dreamweaver, Photoshop, or some other type of WYSIWYG editor. Being something of a web standards snob (WSS?), I really wanted to avoid the use of tables for layout.

Let's back up a second so I can be perfectly clear. The HTML tables in question validate, and so they are standards-compliant in the strictest sense. However, there are many reasons why using tables for layout is a bad idea. I'm especially partial to the argument given at the second link, which makes a case for semantics, accessibility, and efficiency.

Above all this, however, I really wanted the page to look exactly as Steve had created it--and if I couldn't figure out a way around tables, then tables I would use.

Fortunately, Steve's design looked like it could fit in a classic metaphor: the Three Column "Holy Grail" layout. Referencing that article and another on Multi-Column Layouts, I went to work.

The layout was rather simple: a left column displaying a 230 pixel image, a right column displaying a 50 pixel image, and a center column. The center column was a bit tricky: Steve's design subdivided it into two 260 pixel columns, with 10 pixels of space between the original left column, the center left, the center right, and the original right column. This was just for the front page; the page I was to add would use the full 530 pixels and have a 10 pixel margin on the left and the right. Additionally, the whole design is centered in the page.

Reading through the above articles I found two major techniques: a centered layout having fixed-width rails with a fluid center, or a left-aligned layout with everything of fixed-width. Not what I had in mind—the page really looked better centered, and making the center column fluid would disrupt the design. Giving a text-align:center; property to any of the surrounding block elements did nothing useful.

Fortunately, I remembered a really neat article on CSS centering, which turned out to provide exactly what I needed:

margin:0px auto;

Applying that to the containing block in the 3 column fixed-width example centered it perfectly! Well, I had to remove the float:left; directive and change the coloring around, too. A full listing of the revised example CSS is below:

#container{
  margin:0px auto;      
  width:500px;
  /* The width and color of the left rail */
  border-left:150px solid #cf9;
  /* The width and color of the right rail */
  border-right:200px solid #c33;
}

#leftRail{
  float:left;
  width:150px;
  margin-left:-150px;
  position:relative;
  background-color:#cf9;
}

#center{
  background-color:#9cc;
  float:left;
  width:500px;
  margin-right:-500px;
}

#rightRail{
  float:right;
  width:200px;
  margin-right:-200px;
  position:relative;
  background-color:#c33;
}

You can also view the example.

In the end, I achieved my goal: The Thread uses no tables, validates, and looks exactly like the original design! A victory for CSS, indeed.