Main Content Area

This two column layout example uses float positioning and the normal flow to create two columns. The side bar/navigation column is fixed width and the main content column is liquid. The total width of the document however, is constrained to 770 pixels of width by using a container div to enclose the layout.

The container div goes around the contents of the document, inside the body tag.

Here is the CSS for the body element and the container div:

body { text-align: center; }
#container {
	text-align: left;
	margin: 0 auto;
	width: 770px;
}

Aside from the width obviously being set to 770 pixels wide, there are two points to make here:

  1. The margin properties are set to 0 for top and bottom and auto for left and right. This is what centers the page content in most browsers.
  2. The body rule, which aligns the text to the center is there so that the page content centers in IE5.X/Win. The first rule in the content declaration resents the text alignment to left for the container div and its descendants.

This is the CSS code for the header div:

#header {
	border: 1px solid black;
	margin: 20px;
	padding: 20px;
}

Because it is in the normal flow, there is nothing fancy going on here.

This is the CSS for the side bar:

#sidebar {
	border: 1px solid black;
	width: 200px;
	margin-left: 20px;
	float: left;
	display: inline;
}

The box is set to 200 pixels wide and floated to the left. The left margin ensures it stays 20 pixels off the left side of the container div. The last line, display: inline; is there to fix a rendering bug with Internet Explorer for Windows. Since floated objects are treated like block boxes this seems like a silly rule to specify. Setting the display property to inline fixes some strange margin issues with Internet Explorer for Windows and has no impact on the layout in Mozilla/Opera/Safari.

The code for the main content area is as follows:

#content {
	margin-left: 242px;
	margin-right: 20px;
	border: 1px solid black;
	padding: 20px;
}

The trick here is setting the left margin to be at least the width of the floated side bar. I chose 242 pixels for this example because the side bar is 200 pixels wide, has 20 pixels of left margin, and I want the content box to be 20 pixels from the right of the side bar. Plus I need 1 pixel for each side border on the side bar. I do not set a width on the content area so that it will expand to the right and fill the remaining horizontal space provided by the container div.

The footer CSS is:

#footer {
	margin: 20px 20px 0 20px;
	padding: 20px;
	border: 1px solid black;
	clear: left;
}

The footer is cleared to the left side so that if the side bar is longer than the content area the footer still rests below the sidebar.

This is just one of many methods for creating two column fixed width layouts, a search for "two column liquid layout" or "fixed width CSS layout" on your favorite search engine will reveal many other methods.