CSSを利用したtableタグを使わないレイアウト
ソリッドレイアウト:中央固定幅の3段カラム
まずは"ソリッドレイアウト:中央固定幅の3段カラム"がどういうレイアウトなのか知るためにサンプルを用意しました。ソリッドレイアウト:中央固定幅の3段カラムのサンプル
このレイアウトを実現するためのソースと解説をしていきます。
<body><div id="container"></body><div id="header_box"> ヘッダー </div><div id="wrapper"><div id="main_box"> メインボックス </div><div id="leftside_box"> 左サイドボックス </div><br clear="all" /> </div><div id="rightside_box"> 右サイド </div><br clear="all" /><div id="footer_box"> フッター </div></div>
全体を"container"で包み、その中に上部(header)、中部(wrapperとrightsideと<br clear="all" />)、下部(footer)を配置します。
さらにwrapperの中にmainとleftsideと<br clear="all" />を配置します。 上(ヘッダー):"header"
中:
中左:"wrapper"
中左右(メイン):"main"
中左左(左サイド):"leftside"
中右(右サイド):"rightside"
下(フッター):"footer"
/* レイアウト */ body { width: 996px; text-align: center; }#container { width: 980px; margin-left: auto; margin-right: auto; text-align: left; }#wrapper { width: 820px; min-width: 620px; float: left; }#main_box { width: 580px; min-width: 380px; float: right; }#leftside_box { width: 240px; float: right; }#rightside_box { width: 160px; float: left; }
/* 各BOXの背景 */ #container { background-color: #ccc; } /* 灰色 */ #header_box { background-color: #33c; } /* 青色 */ #wrapper { background-color: #3c3; } /* 黄緑色 */ #main_box { background-color: #c33; } /* 赤色 */ #leftside_box { background-color: #cc3; } /* 黄色 */ #rightside_box { background-color: #c3c; } /* 紫色 */ #footer_box { background-color: #3cc; } /* 水色 */
ソリッドレイアウト:中央固定幅の3段カラムのサンプル
リキッドレイアウト: 中央可変幅の3段カラム
リキッドレイアウト:中央可変幅の3段カラムのサンプル