2カラムレイアウト － 2カラムレイアウトのイメージ

2カラムレイアウト － 2カラムレイアウトのイメージ

2カラム（2段組）レイアウトの場合、「大きな枠の中に、左右に寄せられた内枠を2つ作る」というのが大まかなイメージになります。

上の図は2カラムレイアウトのイメージを表したもので、緑色の線が外枠、水色の部分がメインスペース、黄色の部分がサイドバーの枠になっています。

メインとサイド、2つの枠を作るわけですが、それぞれを「配置する」というより、上の図のように「外枠の範囲内でそれぞれのスペースを左右に寄せる」というイメージです。

実際、それぞれのスペースはCSSプロパティ「float」を利用して左右に寄せて配置することになり、これがCSSレイアウトの根幹をなすものとなります。（注）

【注意】
floatプロパティを使ってスペースを左右に寄せる方法以外にもCSSでレイアウトを組む方法はありますが、当サイトではできるだけ多くのブラウザで崩れが発生しないよう、floatを使って左右に枠を寄せるという手法を採用しています。