That Side

Main Content Area

This three column layout example is just an extension of my two column approach. It uses float positioning and the normal flow to create three columns, two are floated, one is in the normal flow.The side bar/navigation columns are fixed width and the main content column is liquid.

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 "This Side" side bar:

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

The box is set to 150 pixels wide and floated to the left. The left margin ensures it stays 20 pixels off the left side of the browser window. 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.

This is the CSS for the "That Side" side bar:

#othersidebar {
	border: 1px solid black;
	width: 150px;
	margin-right: 20px;
	float: right;
	display: inline;
}

The box is set to 150 pixels wide and floated to the right. The right margin ensures it stays 20 pixels off the right side of the browser window. The last line, display: inline; is there to fix a rendering bug with Internet Explorer for Windows, same as with the "This Side" sidebar.

The code for the main content area is as follows:

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

The trick here is setting the left margin to be at least the width of the floated "This Side" side bar and the right margin to be at least the width of the right floated "That Side" side bar. I chose 192 pixels for this example because the side bars are each 150 pixels wide, have 20 pixels of left or right margin, and I want the content box to be 20 pixels from either side bar. Plus I need 1 pixel for each side border on the side bars. I do not set a width on the content area so that it will expand to fill the remaining horizontal space.

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 liquid layouts, a search for "two column liquid layout" on your favorite search engine will reveal many other methods.