2-col CSS Layout

This is <div id="content">

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:         3px 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:         3px solid blue;
   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 {
	 border:         3px solid green;
/* 200px for sidebar,
    20px for sidebar margin, 
    22px for spacing from sidebar */
  margin-left:    242px; 
  margin-right:   20px;
  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 {
   border:         3px solid gold;
   margin:         20px 20px 0 20px;
   padding:        20px;
   /* start on far left margin */
   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

Main Content Area