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

Category
： CSS ビギナー向け

2カラム

←このようごくごく普通の2カラムのレイアウトの解説をしようと思います。

基礎をしっかりと押さえてないと、応用なんて出来ないですからね。

自分の経験を生かしてレイアウト崩れがおきにく用な組み方をしたいと思います。

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="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>

CSS

div#wrapperBox	{
	width: 580px;
}
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#mainBox	{
	float: right;
	width: 390px;
	background: #FC9;
	padding: 120px 5px;
}
div#subBox	{
	float: left;
	width: 150px;
	background: #09F;
	padding: 120px 5px;
}
div#footerBox	{
	width: 550px;
	padding: 5px 15px;
	background: #666;
	color: #FFF;
}