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段カラムのサンプル
インデックス
HTML