まずは、この基本的な2カラムレイアウトを読み進めるとどんなのが出来上がるのか、実際に作成されたサンプルサイトを見てください。（別窓とかで開きながら見てもらうと分かりやすいかも知れません）

• サンプルサイトを見る

見てもらうと上から、ヘッダー、メイン、サイドバー、フッターで構成された簡単な2カラムレイアウトが確認出来ます。
各部の呼び方は不要かもしれませんが念のため、以下のような感じで読んでます。

んで、このレイアウトを作成するのにポイントとなってくるのは、当然ですが段組みになっているメインとサイドバー部分です。
通常、ブロックレベル要素は横に並ばないため段組みにはならないので、2段組みになるようCSSを指定する必要が有ります。

このために使うプロパティが「floatプロパティ」です。このプロパティの指定をする事で、指定された要素は可能な限り左（値がleftの場合）に寄り、後続する内容は可能な限りその側面に流し込まれます。
これにより、メインにflaot: left;の指定をすると、後続するサイドバーは右側に流し込まれ、2カラムレイアウトになります。
この際、親要素よりメインとサイドバーの横幅が大きいと2カラムにならず、いわゆるカラム落ちの状態になってしまうので横幅には注意が必要です。

・・・と、何だかいきなり訳の分からない感じかもしれませんが、2カラムに限らず、CSSでレイアウトを行う以上必須になってくるのがfloatプロパティです。

では、まずはHTMLから作成していきます。

<div id="page">

<div id="header">
<!-- / #header --></div>


<div id="contents">

<div id="main">
<!-- / #main --></div>

<div id="sub">
<!-- / #sub --></div>

<!-- / #contents --></div>


<div id="footer">
<!-- / #footer --></div>

<!-- / #page --></div>

レイアウトに関する要素のみだと上記のような構造になっており、このレイアウト用のdiv要素にスタイルを当てていきます。
HTMLの構造を見てもらうと、div id="contents"内にdiv id="main"とdiv id="sub"が内包されているのが確認出来ます。このdiv id="contents"が無くとも2カラムにする事は可能ですが、デザイン性を持たせた際に必要になったり、レイアウト崩れやバグの誘発を防ぐために必要になってきます。
また、2カラムを作成するだけならdiv id="page"は不要な場合も有りますが、全体の横幅を決めたりセンタリングするのに使うので実用性を考えると必要になってきます。

このように、カラムレイアウトを作成するにはHTMLの構造が重要で構造が滅茶苦茶だと思うように組めなかったり後から追加したりと大変です。また、デザインによってはdiv要素を追加したりする必要が有りますが、今回程度のデザインなら追加する必要は有りません。

んでは、構造がざっくりと分かった所で、スタイルが当たる前のマークアップ済みHTMLファイルとCSSファイルが入っている一式を下記に用意していますので、ダウンロードしてお使い下さい。

• HTMLを見る
• HTMLファイルとか一式をDL

ダウンロードしたzipファイルを解凍すると「sample_01」というフォルダが出来ます。その中に「index.html」とcssフォルダが入ってますので、まずはindex.htmlをブラウザで表示させつつ、テキストエディタ（やオーサリングツール）でも開いて下さい。
ブラウザで見ると、上記HTMLを見るのように、CSSが当たっていない状態で表示されます。

これでHTMLファイルの準備が完了したので、次からCSSを書き始めます。

このdefault.cssは先ほどダウンロードした一式に入っていますので、これを適用させます。
適用させるには、head要素内のlink要素によってCSSファイルを読み込んでいる部分（18行目）のパスを以下のように「_」から「.」に変更します。

<link rel="stylesheet" href="_/css/import.css" type="text/css" media="all" />
↓↓↓↓
<link rel="stylesheet" href="./css/import.css" type="text/css" media="all" />

これで、default.cssが適用されたのが確認できるかと思います。
なお、default.css以外のCSSファイルには特に指定をしていないため、これと言った変化は有りませんが、import.cssを通して他のCSSファイルも実際には読み込まれています。

• default.cssが適用された状態

ここまで完成したら、いよいよレイアウト部分に入ります。

全体をセンタリング

全体をセンタリングさせるには、全体を囲っているdiv要素の#pageに、下記のようにwidthプロパティで横幅の指定をし、marginプロパティで左右のマージンをautoと指定します。

この指定は「style.css」の30行目辺りに#pageとコメントが有るのでその直後にスタイルを書くようにします。

/* --------------------------------------------------------
  #page
-------------------------------------------------------- */
#page {
  width: 860px;
  margin: 0 auto;
  text-align: left;
}

これで全体がセンタリングされます。

なお、IE5.xやIE6の互換モードでは、左右マージンの値をautoにしてもセンタリングされませんが、text-align: center;の指定をするとブロックレベル要素がセンタリングされるバグが有り、これを利用してセンタリングさせます。
具体的には、body要素にtext-align: center;の指定をすると、子要素である#pageがセンタリングされます。このままだとテキストもセンタリングされてしまうので、text-align: left;の指定をする事でテキストを左寄せに戻します。
IE5.xやIE6の互換モードは対応ブラウザに含めていないので、別にいいんですが、最低限の対応として一応行っています。（この部分の内容はHTML5でいうとaside要素でマークアップ出来ますね。）

ヘッダーの作成

次はヘッダーに取り掛かります。
ヘッダーのスタイルは「style.css」ではなく「module.css」に書くようにします。

/* --------------------------------------------------------
  #header
-------------------------------------------------------- */
#header {
  margin: 15px 0;
  padding: 15px;
  background: #2e69ab;
  color: #fff;
}

#header h1 {
  font-size: 125%;
}

ヘッダー部分ではデザイン用の指定が有るだけなので、レイアウト関係で特にポイントとなる部分は有りません。
分からないプロパティが有る場合は、「プロパティ」から調べて頂ければと思います。

ここまでのスタイルを適用させると、下記のようになっています。

• ここまでのサンプルを見る

センタリングされ、ヘッダー部分が完成しました。次は、肝となってくる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カラムっぽくなりましたが、フッターまでメインの横に流し込まれているので、次はソレの対応と諸々の調整やデザインを整えます。

フッターの作成

フッターのスタイルはヘッダーと同じく「module.css」に書いていきます。

/* --------------------------------------------------------
  #footer
-------------------------------------------------------- */
#footer {
  clear: both;
  width: 830px;
  margin-bottom: 15px;
  padding: 15px;
  background: #2e69ab;
}

#footer .copyright {
  text-align: center;
  color: #fff;
}

このフッターで一番のポイントとなってくるのがclearプロパティの指定です。この指定をする事で、フッター部分が横に流し込まれずメインの下に表示されます。

全体の横幅は860pxですが、フッターは830pxと指定しているのは、左右パディングの15pxが足されて実際には890pxとなってしまうからです。
また、一見widthプロパティの指定はいらないように見えますが、指定が無いとIEで不自然な上パディングができてしまいます（zoomプロパティでも対応出来ます）。

• ここまでのサンプルを見る
• IE6, 7でダメなサンプル

これで、フッターまで完成しました。もう一息で完成です。

#contentsの作成

順番的に、メインとサブを作っているタイミングでも良かったんですが、実際に組んでいるとそんなに効率よく書けなかったりして#contentsが後になり、その後さらにメインとサブを調整したりするんでここに来て#contentsの作成に入ります。

最初に見た完成形にするために、#contentsに必要な指定をします。

/* --------------------------------------------------------
  #contents
-------------------------------------------------------- */
#contents {
  float: left;
  width: 830px;
  margin-bottom: 15px;
  padding: 15px;
  background: #2e69ab;
}

ここで重要なのはfloat: left;とwidth: 830px;の指定です。特にfloatプロパティの指定が大切で、この指定が無いと背景色が表示されなくなってしまいます。

これらの指定をした状態を実際のブラウザで見ると以下のようになり、ブラウザによって表示が異なってきます。

• ここまでのサンプル

このままでは当然ダメなので、メインとサブの調整をします。

/* --------------------------------------------------------
  #main
-------------------------------------------------------- */
#main {
  float: left;
  width: 515px;
  padding: 15px;
  background: #fff;
}

/* -----------------------------------------------------------
  #sub
----------------------------------------------------------- */
#sub {
  float: right;
  width: 270px;
  color: #fff;
}

この調整で、2カラムレイアウトは完成です。

• 調整したサンプル

メイン内の作成

メイン内の各要素にスタイルを当てます。

#main table,#main ol,#main ul,#main dl,#main blockquote,#main pre,#main p {
  margin-bottom: 10px;
}

#main .pageTop {
  clear: both;
  margin: 0;
  text-align: right;
}

#main h2 {
  margin: 0 0 10px;
  padding-bottom: 3px;
  border-bottom: 5px solid #2e69ab;
  font-size: 120%;
}

#main h3 {
  margin: 30px 0 10px;
  padding-left: 5px;
  border-left: 5px solid #2e69ab;
  font-size: 110%;
}

これで、ほぼ全てが完了です。

おまけの角丸

最後にちょっとしたおまけとして、CSS3を使って角丸を作成します。

/* --------------------------------------------------------
  角丸
-------------------------------------------------------- */
#header,
#footer,
#contents,
#main {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

border-radiusプロパティの指定をすることで、Firefox3～、Safari3～、Chrome辺りで見た場合に指定された要素の角が丸くなってくれます。
情報に支障を与える訳ではないので、個人サイト等なら使っていけるプロパティかと思います。
ちなみに、Operaは10.5、IEは9で対応予定っぽいです。
角丸の詳細に関しては「border-radiusプロパティ」でご確認ください。

何はともあれ、以上で全て完成となります。
お疲れさまでしたっ！

• 完成したサンプル
• 完成したサンプルのダウンロード

あとがき的な

分かってる人からすると非常に簡単なサンプルでしたが、書いてて思うのは実際にこのレイアウトから説明が必要な人は、この説明でどの程度分かってもらえるのか。もしくは、説明が冗長過ぎてかえって分かり難いのか...等々色んな課題が残ります。
感想等有ればくださいませ。