05. メインとサイドを2カラムに
ここまで完成したら、いよいよ2カラム部分に入ります。
floatとwidthの指定
最初に軽く触れたように、ここでfloatプロパティの指定をして2カラムを作成していきます。
まずは、#main
から指定します。
/* --------------------------------------------------------
#main
-------------------------------------------------------- */
#main {
float: left;
width: 570px;
background: #ccf;
}
これで、#main
が左フロートし、サイドバーとフッターが右側に流し込まれます。
backgroundプロパティで背景色の指定をしているのは、横幅を分かりやすくするためです。
続いて、#sub
にもfloatプロパティとwidthプロパティの指定をします。
/* -----------------------------------------------------------
#sub
----------------------------------------------------------- */
#sub {
float: right;
width: 270px;
background: #ccc;
}
#main
と同様に#sub
もfloat: left;
と指定しても問題ありませんが、left
にした場合、メインとサブ間でマージンの調整が必要になってくるので今回はright
にしています。
これで、だいぶ2カラムっぽくなりましたが、フッターまでメインの横に流し込まれているので、次はソレの対応と諸々の調整やデザインを整えます。