ここではfloatで作る2段組(固定)を解説します。
CSSでのレイアウトの基本となるものですので、とっかかりには最適だと思います。
ここでは本文(#primary)と関連情報(#secondary)から構成される簡単な段組みを作ってみます。
floatで作る2段組(固定)作成の流れ
1.段組みとなるボックスを作成する
(X)HTML部分
[html]
<div id=”wrapper”>
<div id=”primary”><br /><br /><br /></div>
<div id=”secondary”><br /><br /><br /></div>
</div>
[/html]
CSS部分
[css]
#wrapper {
width: 760px;
}
#primary {
float: right;
width: 560px;
background-color: #F7FFF0;
}
#secondary {
float: left;
width: 200px;
background-color: #EEFEFF;
}
[/css]
※floatを使うときはwidthを指定する
CSS2の仕様では、置換要素以外のボックスにfloatプロパティを指定する場合、必ずwidthプロパティで幅を指定しておく必要があります。
多くのモダンブラウザでは表示されますが、Mac IE5といった一部のブラウザは幅を指定しないとうまく回り込みがされないことがあります。
2.ヘッダーを追加する。
(X)HTML部分
[html]
<div id=”wrapper”>
<div id=”header”><br /><br /></div>
<div id=”primary”><br /><br /><br /></div>
<div id=”secondary”><br /><br /><br /></div>
</div>
[/html]
CSS部分
[css]
header {
height: 40px;
background-color: #FFD0B0;
}
[/css]
positionプロパティと大きく違うことは、それぞれのボックスが、ほかのボックスの配置に影響していることです。positionプロパティの場合、#headerの高さの変更によっては、ボックス同士が重なりあってしまうケースがありましたが、floatプロパティの場合、その様な高さの変更に応じて柔軟に対応できるレイアウトを作ることができます。
3.フッターの配置と回り込みの解除
次に、フッターのボックスを配置し、#footerにclearプロパティを指定し、floatプロパティによる回り込みを解除する。
(X)HTML部分
[html]
<div id=”wrapper”>
<div id=”header”><br /><br /></div>
<div id=”primary”><br /><br /><br /></div>
<div id=”secondary”><br /><br /><br /></div>
<div id=”footer”><br /><br /></div>
</div>
[/html]
CSS部分
[css]
footer {
clear: both;
height: 40px;
background-color: #FFF7E1;
}
[/css]
※通常、ボックスにfloatプロパティを指定したときは、後に続くボックスの内容は反対の位置に回り込んで配置されますが、clearプロパティを指定することで、これを解除することができます。逆に解除を忘れてしまうと、レイアウトが崩れて表示されてしまうことがあります。
floatプロパティを指定したときには、回り込みの解除をすることを忘れないようにしましょう。
floatで作る2段組(固定)のサンプルはこちら
上記の記述とは多少異なる部分はあります。詳しくはソースを確認してください。