さて、今回からはレイアウトのお話。

ひとえにレイアウトと言っても色々あります。
定番の左ナビゲーション型や上部ナビゲーション型で中央にコンテンツ、ここ数年で少しずつ増えてきた右ナビゲーション型、横に伸縮するリキッドレイアウト、その他にも奇抜なレイアウト等など、多種多様に存在します。

しかし、そのレイアウトも基本はヘッダ・フッタと次の三つ、四つ？のどれかを基本にして作られています。
1Column・2Columnや3Columnレイアウト、もしかすると4Columnもあるかな？（笑）
この基本レイアウトをいかにして作るかを見ていきましょう。

まずは、一番簡単な1Columnですね。
何の事はありません。
ヘッダとコンテンツとフッタを付ければ完成です。

<div id="header">

</div>
<!-- header End -->

<div id="contents">


</div>
<!-- contents End -->

<div id="footer">

</div>
<!-- footer End -->

ここからが本題です。
まあ、やり方は様々ですがcolumnをfloatさせて作るのが基本です。

#column-left {
width: 200px;
float: left;
}
#column-right {
width: 600px;
marginleft: 200px;
}

<div id="header">
</div>
<!--heder End -->

<div id="contents">

<div id="column-left">
</div>
<!-- column-right End -->

<div id="column-right">
</div>
<!-- column-rigth End -->

</div>
<!-- contents End -->
<div id="footer">
</div>
<!-- footer End -->

このfloatのさせ方にも、column-leftを左にfloatさせた上で、更にcolumn-rightを左にfloatさせたり、右にfloatさせたりする方法もあります。
あまりおススメではないですが、position:absolute;にするっといった方法もあります。
しかしこれは、absoluteじゃないcolumnの高さが足りてない場合フッター等などにabsoluteのcolumnが足を突っ込んだりしてしまうので気をつけましょう！
まあ、min-heigthを使えばいいんですけど、これがまたIE6に対応していないという・・・。
どれが正解というわけではないので、それぞれコーディングしやすい方法でレイアウトを構成しましょう。