floatで作る3段組(固定)

ここではfloatで作る3段組(固定)を解説します。
よくブログなどでみることが多いレイアウトです。2段組の仕組みを理解したら、すぐに理解できるものです。
ここでは、2段組で作ったベースを利用して、3段組みを作ってみます。

floatで作る3段組(固定)作成の流れ

1.段組みとなるボックスを作成する

右側にニュースなどが入ることを想定した3つ目のボックス(#news)を追加します。
#primaryと#secondaryの記述順序を入れ替える。

(X)HTML部分

<div id=”wrapper”>
<div id=”secondary“><br /><br /><br /></div>
<div id=”primary“><br /><br /><br /></div>
<div id=”news“><br /><br /><br /></div>
<div id=”footer”><br /><br /></div>
</div>

CSS部分

#wrapper {
width: 760px;
}

#primary {
float: left;
width: 460px;
background-color: #F7FFF0;
}

#secondary {
float: left;
width: 150px;
background-color: #EEFEFF;
}

#news {
float: right;
width: 150px;
background-color: #F8E8FF;
}

footer {
clear: both;
height: 40px;
background-color: #FFF7E1;
}

2.段組を束ねるためにもう一つボックスを作る

実はこれだけでも3段組はできてしまいます。これはfloatプロパティを用いて段組を作成する場合、HTML文書で並列に並んだ要素の中で、一番先頭に記述された要素のボックスは、段組の左右両端のどちらかにしか配置することしかできないからです。
しかし、CSSの利点を活かすならば、文書の流れをコントロールしたいものです。ここで2つのボックスを束ねるボックスを作り、問題を解決することができます。

HTML文書に、#primaryと#secondaryを束ねる、#containerというボックスを記述します。そして#primaryと#secondaryの順序を入れ替えます。

(X)HTML部分

<div id=”wrapper”>
<div id=”container“>
<div id=”primary“><br /><br /><br /></div>
<div id=”secondary“><br /><br /><br /></div>
</div>
<div id=”news”><br /><br /><br /></div>
<div id=”footer”><br /><br /></div>
</div>

CSS部分

#wrapper {
width: 760px;
}

#container {
float: left;
width: 610px;
}

#primary {
float: right;
width: 460px;
background-color: #F7FFF0;
}

#secondary {
float: left;
width: 150px;
background-color: #EEFEFF;
}

#news {
float: right;
width: 150px;
background-color: #F8E8FF;
}

footer {
clear: both;
height: 40px;
background-color: #FFF7E1;
}

これで完成です。
これは、一度に3つのボックスを寄せるのではなく、2回のステップに分けて寄せる考え方です。つまり1回目のステップで、中の部分の#primaryと#secondaryを左右に寄せて、2回目のステップで外側の#containerと#newsを左右に寄せたわけです。

floatで作る3段組(固定)サンプルはこちら
上記の記述とは多少異なる部分はあります。詳しくはソースを確認してください。