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

ステップ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="contentsBox">
<div id="mainBox">
<p>mainBox</p>
<!--/ #mainBox--></div>
<div id="subBox">
<p>subBox</p>
<!--/ #subBox--></div>
<!--/ #contentsBox--></div>

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

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

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

そうするとこうなると思います。

ステップ2

3カラムの場合は、subとmainを包んでいるcontentsBox、subNaviBoxをfloatさせます。

div#contentsBox	{
	width: 460px;
	float: right;
}
div#contentsBox:after	{
	height:	0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}
div#subNaviBox	{
	width: 110px;
	float: left;
	background:#99C;
	padding: 120px 5px;
}

ステップ3

その次にcontentsBoxの子要素であるmainBoxとsubBoxをfloatさせるって感じです。

div#mainBox	{
	float: left;
	width: 360px;
	background: #FC9;
	padding: 120px 5px;
}
div#subBox	{
	float: right;
	width: 80px;
	background: #09F;
	padding: 120px 5px;
}

ステップ4

指定しているCSSは下記の通りです。

div#wrapperBox	{
	width: 580px;
	margin-bottom: 25px;
}
div#headerBox	{
	width: 550px;
	padding: 10px 15px;
	background: #333;
	color: #FFF;
	margin:
}
div#navigationBox	{
	width: 560px;
	padding: 3px 10px;
	background: #CCC;
}
div#containerBox	{
	width: 580px;
}
div#containerBox:after	{
	height:	0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}
div#contentsBox	{
	width: 460px;
	float: right;
}
div#contentsBox:after	{
	height:	0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}
div#subNaviBox	{
	width: 110px;
	float: left;
	background:#99C;
	padding: 120px 5px;
}
div#mainBox	{
	float: left;
	width: 360px;
	background: #FC9;
	padding: 120px 5px;
}
div#subBox	{
	float: right;
	width: 80px;
	background: #09F;
	padding: 120px 5px;
}
div#footerBox	{
	width: 550px;
	padding: 5px 15px;
	background: #666;
	color: #FFF;
}

完成