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

Category
： CSS ビギナー向け

3カラム

前回2カラムのレイアウトの解説したので、今回は

←このような3カラムのレイアウトの解説をしようと思います。

CSSレイアウトのデモページ

デモページで使われてるソース

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>

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;
}