Two Column Liquid Layout

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.

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 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.

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.

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.

Sample Two Column Liquid Layout

Navigation

Main Content Area