Getting trickier: the three-column version

But what if we can take this even further and attempt a three-column layout with a fluid content area? Not only can we do this, we can do it surprisingly easily! We'll need to make a few final tweaks to our XHTML by adding a few more divs — and then we'll be ready to write some more CSS.

<div id="outer_wrapper">

  <div id="wrapper">
    <div id="container">
      <div id="content">

        <div id="left">
          <h1>navbar</h1>
          <ul>
            <li>link one</li>
            <li>link two</li>
          </ul>
        </div>

        <div id="main">
          <h1>content</h1>
          <p>Lorem ipsum dolor sit amet,
          consectetuer adipiscing elit.
          Phasellus varius eleifend.</p>
          <p class="last">Donec euismod.
          Praesent mauris mi, adipiscing non,
          mollis eget, adipiscing ac, erat.
          Integer nonummy mauris sit.</p>
        </div>

      </div>
    </div>

    <div id="sidebar">
      <h1>sidebar</h1>
      <p>Here be your sidebar.
      Add whatever content you may desire.</p>
    </div>

    <div class="clearing">&nbsp;</div>
  </div>

</div>

Re-implementing faux columns

Again, since we will want all our columns to have equal heights, we are going to create more faux columns. We've created the following two images:

As you can see by the XHTML above, we've added another wrapper div in addition to the left sidebar div, and a div around the middle content. Our new wrapper div will contain the background image for our new column, positioned to the left and repeated down to the bottom of the div. Also, we've removed the background from the content div and will now add the desired background color to our outer_wrapper div:

#outer_wrapper {
  background: #fff url(background_3.gif) repeat-y left;
}
#wrapper {
  background: url(background_2.gif) repeat-y right;
}

The white background will show through where the image is not being displayed, thus coloring our middle column. We are also going to add the backgrounds to our inner elements to avoid some ugly gaps that are present in most versions of Internet Explorer.

#container {
  width: 100%;
  float: left;
  margin-right: -200px;
  background: url(background_2.gif) repeat-y right;
}
#content {
  margin-right: 200px;
  background: url(background_3.gif) repeat-y left;
}

We then add these simple styles to again use margins to position our left and middle columns where needed.

#main {
  margin-left: 150px;
}
#left {
  width: 150px;
  float: left;
}

Finally, we've added the following styles to our header and footer divs to give the layout a more finished look:

border: 1px solid #cecea5;