How to Use Three-Column Layouts in CSS3 - dummies

How to Use Three-Column Layouts in CSS3

By John Paul Mueller

Three-column layouts in CSS3 are commonly used on sites that provide a list of generic links on one side of the page, content in the middle, and advertising or page-specific links on the other side.

The Dynamic Drive layout pages show one use of this layout where you see a list of offerings in the left pane, the actual layouts in the content pane, and a list of sponsors in the right pane.

There are variations on this theme. One example appears on the Electronic Frontier Foundation site where you see site links in the left pane, information about EFF in the content pane, and news links in the right pane.

You can see a list of the three column layouts at CSS Library. As with the two-column layouts, you find a mix of fixed and fluid layouts when working with the three-column layouts.

Of course, there are more types of three-column layouts than there are of two-column layouts because more permutations are possible. In some of the layouts, one of the side columns is fluid, as is the content column. There’s even a layout where all three columns are fluid, which means that the entire layout will resize itself to match the current browser window size.

The one type of three-column layout missing from this site is one in which the two columns are aligned, one over the top of the other. This form is commonly used for online documentation, such as the Java 7 API.


One way around this problem is to use another product, such as the UI Layout plug-in for jQuery. Another alternative is to modify the CSS Fixed Layout #3.3- (Fixed-Fixed-Fixed) layout.


You don’t need to make any changes to the HTML part of this example. The HTML5 version of the layout looks like this. (You can find complete code for this example in the Chapter 07 folder of the downloadable code as ThreeColumnHelpLayout.HTML.)

<!DOCTYPE html>
 CSS Fixed Layout #3.3- (Fixed-Fixed-Fixed)
 <link rel="stylesheet"
  href="ThreeColumnHelpLayout.CSS" />
 <div id="maincontainer">
 <div id="topsection">
  <div class="innertube">
  CSS Fixed Layout #3.3- (Fixed-Fixed-Fixed)
 <div id="contentwrapper">
  <div id="contentcolumn">
  <div class="innertube">
   <b>Content Column: <em>Fixed</em></b>
 <div id="leftcolumn">
  <div class="innertube">
  <p><b>Left Column: <em>180px</em></b></p>
 <div id="rightcolumn">
  <div class="innertube">
  <p><b>Right Column: <em>190px</em></b></p>
 <div id="footer">

The CSS starts with the code supplied by the site. In order to modify this code to provide the format required for help documentation, you need to make a few small changes. The following procedure tells you how.

  1. Change the margin-left property for the #rightcolumn style to -840px.

    This change makes the right and left columns even.

  2. Change the width property for the #rightcolumn style to 180px.

    This change makes the right and left columns equal widths.

  3. Add a height property value of 250px to both the #leftcolumn and #rightcolumn styles.

    This change allows both columns to use half the available space for content.

  4. Add a margin-top property value of 250px to the #rightcolumn style.

    This change positions the right column below the left column.

  5. Load the resulting page into your browser.

    You see a three-column layout like this one:


The Dynamic Drive templates are flexible and can often serve other purposes with a few small changes. The important thing is to start with a layout that looks close to what you want to use.