3 column layout with fixed-width columns

This is a very simple way to do a 3-column layout with 3 fixed-width columns and centred on the page.

Tested with Firefox 3, Firefox 4, Google Chrome, IE8 and Opera 11, using the same CSS & html for all these browsers.

HTML Source

<div id="columnContainer">

  <div id="leftCol">
    Left column text/images etc
  </div>

  <div id="centreCol">
    Main centre column text/images etc
  </div>

  <div id="rightCol">
    Right column text/images etc
  </div>

</div>

CSS

#columnContainer {
  text-align: center;
  background: #bcd6eb;
}

#leftCol {
  text-align: left;
  width: 30%;
  display: inline-block;
  *display: inline;
  vertical-align: top;
  border: 1px solid #f00;
  clear: none;
}

#centreCol {
  vertical-align: top;
  text-align: left;
  width: 30%;
  display: inline-block;
  *display: inline;
  margin-left: 30px;
  margin-right: 30px;
  border: 1px solid #0f0;
  clear: none;
}

#rightCol {
  vertical-align: top;
  text-align: left;
  width: 30%;
  display: inline-block;
  *display: inline;
  border: 1px solid #00f;
  clear: none;
}

Example

Left column text/images etc

Main centre column text/images etc

Right column text/images etc