Header

To float this left navigation area, we need to use the rule: "#leftnav {float: left;}". When a div is set to float, a width must also be included, so we can add another declaration: "width: 160px;".

Next, we set the margin to "0", add 1em of padding (which will move the text away from the edges of the div).

#leftnav {
float: left;
width: 160px;
margin: 0;
padding: 1em;
font: 12px Verdana, Arial, Helvetica, sans-serif;
color: #000000;
}

To float the "rightnav" div, we need to use the rule:

#rightnav {float: right;}

Like the "leftnav" div, we add a width, margin and padding.

#rightnav {
float: right;
width: 160px;
margin: 0;
padding: 1em;
font: bold 12px Verdana, Arial, Helvetica, sans-serif; color: #333399; }

Subheading

This comes from:
http://css.maxdesign.com.au/
floatutorial/tutorial0901.htm
This next step is the most important of the entire process. The "leftnav" div has been floated, so text from the "content" div will flow down the leftnav's right edge and then wrap around under it. To make the text appear as it is in a new column, we apply margin-left to the "content" div, making sure that the width is greater than the overall width of the "leftnav" div. In this case, we will use "margin-left: 200px", which will give us 40px margin between the leftnav and the main content. The same is done to the right side.

We will also apply a border to the left and right of the "content" div. This could be a problem if the "leftnav" div is longer than the main content. If this is the case, the border can be applied to the right side of the "leftnav" div instead of the "content" div.

To add padding to the content div use "padding: 1em;".

#content {
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
padding: 1em;
font: 12px Verdana, Arial, Helvetica, sans-serif;
color: #000000;
}

http://css.maxdesign.com.au/floatutorial/index.htm