CSS 3 Column Liquid Layout

When it comes to trying to use pure CSS to layout documents, it may seem daunting at first but is actually more straightforward than using tables.

First off, define the columns in your HTML page:

<div id="leftColumn">Content comes in here...</div>

<div id="middleColumn">
  <h1>Document Header</h1>
  <p>Content comes in here......</p>
</div>

<div id="rightColumn">Content comes in here.......</div>


Now that is the structure put in place.  The wizardy is done using the ids of each div:
#leftColumn {
  position: absolute;
  top:140px;
  left: 0;
  width: 20%;
  margin-top: 1%;
}
#middleColumn {
  position: absolute;
  top:140px;
  left:20%;
  min-width: 360px;
  width: 58%;
  margin: 1% 1% 0 1%;
}
#rightColumn {
  position: absolute;
  top:140px;
  left: 80%;
  width: 20%;
  margin-top: 1%;
}

The top value can be set to any value depending on whether you are using headers and what the size is.  Margins were used so that the left and right columns can do a bit of resizing for smaller window spaces.

That's it.

Blogged with Flock