CSSレイアウトの基本　2カラム

ステップ1

まず必要な要素を下記ソースの様にxhtmlで記述して下さい

<div id="wrapperBox">

<div id="headerBox">
<p>headerBox</p>
<!--/ #headerBox--></div>

<div id="navigationBox">
<p>navigationBox</p>
<!--/ #navigationBox--></div>

<div id="containerBox">

<div id="mainBox">
<p>mainBox</p>
<!--/ #mainBox--></div>

<div id="subBox">
<p>subBox</p>
<!--/ #subBox--></div>

<!--/ #containerBox--></div>

<div id="footerBox">
<p>footerBox</p>
<!--/ #footerBox--></div>

<!--/ #wrapperBox--></div>

そうするとこうなると思います。
ちなみにwrapperBoxは全てを包む要素、containerBoxはこの後floatするものを包む要素として必要なんです。

ステップ2

説明しやすいように、簡単な要素のwrapperBox、headerBox、navigationBox、footerBoxからCSSの指定をしたいと思います。

div#wrapperBox	{
	width: 580px;
}
div#headerBox	{
	width: 550px;
	padding: 10px 15px;
	background: #333;
	color: #FFF;
}
div#navigationBox	{
	width: 560px;
	padding: 3px 10px;
	background: #CCC;
}
div#footerBox	{
	width: 550px;
	padding: 5px 15px;
	background: #666;
	color: #FFF;
}

wrapperBox要素で全体の幅を指定してあげます。backgroundは分かりやすくする為に色をつけているだけです。各要素で使っているpaddingは余白を作っているだけです。（※この時中の子要素になる<p>のmarginで余白を取るのではなく、親要素からpaddingを取る事がレイアウトポイントです。）

ステップ3

subとmainを左右によせる為にflotを使います。

div#containerBox	{
	width: 580px;
}
div#containerBox:after	{
	height:	0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}
div#mainBox	{
	float: right;
	width: 390px;
	background: #FC9;
	padding: 120px 5px;
}
div#subBox	{
	float: left;
	width: 150px;
	background: #09F;
	padding: 120px 5px;
}

containerBox:afterで指定しているのはclearfixと言われているのですが、詳しくはこちらの記事を読んで下さい

後はfloatさせたい方向にfloatさせるだけです。（※floatを使う要素にはwidthを指定する事を忘れないようにしましょう）
ちなみにpaddingは見栄えをよくする為に余白をとっているだけなので、実際はここまで指定しなくていいですよ。

完成