Two-Column Layout

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.

Basic XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

Two-Column Layout

...header content goes here

...main content goes here

...sidebar content goes here

...footer content goes here

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

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  elements to open up a percentage point or two between them.

Gutters
As is stands, the layout will have no guttering between columns. Adding some padding to the  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  element to the columns: ...main content goes here Padding can now be applied to the new child: padding: 20px; }
 * 1) content div {

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"  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). 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  with an ID of 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.
 * 1) wrap {