ここまで完成したら、いよいよ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にしています。

• #subもフロートさせたサンプル

これで、だいぶ2カラムっぽくなりましたが、フッターまでメインの横に流し込まれているので、次はソレの対応と諸々の調整やデザインを整えます。