Two-Column Layout

From DreamHost
Jump to: navigation, search

How to create a tableless, two-column visual layout for a web page, using basic XHTML and CSS.

Design Goals

  • The design should be capable of being adapted to being fluid (expands/contracts with the window) or fixed (always the same width).
  • There should be a header, followed by two columns for main content and a sidebar.
  • There should be a footer at the bottom that is always beneath the longest column.
  • The content should appear before the sidebar in the code.
  • The column widths should be easy to adjust.
  • It should be easy to swap the position of the columns.
  • The design should work on as many browsers as possible.

Visual Layout

2-col.png

Basic XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

  <head>
    <title>Two-Column Layout</title>
  </head>

  <body>
    <div id="wrap">

      <div id="header">
        ...header content goes here
      </div>

      <div id="content">
        ...main content goes here
      </div>

      <div id="sidebar">           
        ...sidebar content goes here
      </div>

      <div id="footer">
        ...footer content goes here
      </div>

    </div>
  </body>

</html>

Basic CSS

#wrap {
    width: 750px; /* remove for fluid layout */
}
#content {
    width: 65%;
    float: left;
}
#sidebar {
    width: 35%;
    float: right;
}
#footer {
    clear: both;
}

Note: Some browsers have rounding errors when dealing with percentages. It may be necessary to tweak the width of either the content or the sidebar div elements to open up a percentage point or two between them.

Enhancements

Gutters

As is stands, the layout will have no guttering between columns. Adding some padding to the DIV elements would achieve this; however, differences in web browser interpretations of CSS require additional markup to ensure the layout doesn't "break". Add a child DIV element to the columns:

      <div id="content">
        <div>
          ...main content goes here
        </div>
      </div><!-- content -->

Padding can now be applied to the new child:

#content div {
    padding: 20px;
}

False Columns

Using CSS, it is difficult to get a background color on the shortest column to extend all the way down to the footer. It is therefore necessary to create false columns by vertically tiling a background image on the parent "wrap" DIV element. In the example above, there is a 65/35 percent split between the main content column and the sidebar column. In order to make the false column work in both a fluid and a fixed layout, the background must be offset to the right by the same percentage (65).

False cols.png

Create a background image that is wide enough to cope with all browser combinations, say 3000 pixels. It needs to be no more than 1 pixel high, but it might be easier to work with the image file if it was higher. If the content is to be on the left, give the right 35% a different background color from the left (from the 1950th pixel upwards). Using CSS, vertically tile the image as a background for the DIV with an ID of wrap:

#wrap {
    width: 750px; /* remove for fluid layout */
    background: url(false_cols.png) repeat-y 65% 0;
}

Even in a fluid layout, the dividing line between the two columns will remain fixed in place when the browser window is resized.