中央可変の３段組みレイアウト

仕事つながりで、CSSコーディングの依頼をもらった。
久々に気合いが入る。

が、しかし！今回は予想以上に険しい感じ。
相変わらずIE6に悩まされます…
というわけで、今回のメイン「中央可変の３段組みレイアウト」についての覚書き。

■方法その１■
ネガティブマージンで作る
<div id="wrapper">
<div id="container">
<div id="main">メインコンテンツ</div>
</div>
<div id="left">左コンテンツ</div>
<div id="right">右コンテンツ</div>
</div>

#container {
float:left;
width:100%;
}
#main {
margin-left:180px;
margin-right:230px;
background:yellow;
}
#left {
width:180px;
margin-left:-100%;
float:left;
background:red;
}
#right {
width:230px;
margin:-230px;
float:left;
background:blue;
}

■方法その２■
左カラムはfloat:left、右カラムはfloat:rightを指定

<div id="left"左コンテンツ></div>
<div id="right"右コンテンツ></div>
<div id="main"メインコンテンツ></div>

#left {
float:left;
width:180px;
background:red;
}
#right {
float:right;
widht:230px;
background:blue;
}
#main {
margin-left:180px;
margin-right:230px;
background:yellow;
}

■方法その３■
テーブル(width="100")を使って、真ん中のカラムはwidth:100%を設定
<table>
<tr>
<td id="left" valign="top">左コンテンツ</td>
<td id="main" valign="top">メインコンテンツ</td>
<td id="right" valign="top">右コンテンツ</td>
</tr>
</table>

table {
width:100%;
background:green;
border-collapse:collapse;
}
td#left {
width:180px;
background:red;
}
td#main {
background:yellow;
}
td#right {
width:230px;
background:blue;
}

いろいろあるんだなぁ。
今回は１の方法を採用してみまーす！