CSSを利用したtableタグを使わないレイアウト

ソリッドレイアウト:中央固定幅の3段カラム
まずは"ソリッドレイアウト:中央固定幅の3段カラム"がどういうレイアウトなのか知るためにサンプルを用意しました。
ソリッドレイアウト:中央固定幅の3段カラムのサンプル
このレイアウトを実現するためのソースと解説をしていきます。

<body>
<div id="container">
<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>
</body>

全体を"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段カラムのサンプル