CSSによるレイアウトをする以上、必須になってくるのがHTMLです。
という事で、CSSに入る前に基本的な2カラムレイアウトを作成するのに必要な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を書き始めます。