段組は新聞や雑誌のようにコンテンツを見やすくします。が、このデザインが案外難しい。positon: absolute;やposition: relative;を多様すると、ポスター的乃至絵画的にはいつも同じポジションで構成が決まるのですが、ブログなどのように文章の長さや写真の大きさなどが様々な場合はそのような配置が困難になってきます。インデックスなどを表示させる左右どちらかにあるメニュー的な部分（ここでは#betaとしています。）と本コンテンツ（ここでは#alpha）はその都度違う長さになります。そのような場合、長い方（高さのある方）のコンテンツがfooterを押し下げてゆくような構成でなくてはなりません。予め長さが決まっていて文字数などを限定しているのであるならばposition:プロパティーで大丈夫なのですが、新聞のように文字数を決めないのがホームページのよいところです。
　いろいろ試した結果、2カラムの場合はこの構成が一番いいです。

＃headerと#navigatorは独立させる。
#containerの中に#alpha、#beta、#footerを入れ子（ネスト）する。

実際には、こんな感じになります。

<div id="header">
  ここにheader
</div>
<div id="navigator">
  ここにナビゲーター
</div>
<div id="container">
    <div id="alpha">
　　　　　ここにalpha
    </div>
    <div id="beta">
     ここにbeta
    </div>
    <div id="footer">
      ここにfooter
    </div>
</div>

　この構成にすると#alphaと#betaのコンテンツの長さを気にしなくてもどちらか長い方が#footerを押し下げてくれるのでデザイン構成上の問題が起きません。また、curvycornersなどのJavaScriptを使っても問題が起きづらくなります。
 CSSは以下のような感じ。

#header { width: 800px; }
#navigator { width: 800px; }
#container {
    width: 800px;
}
#alpha {
    width: 600px;
    float: left;
}
#beta {
    width: 200px;
    float: left;
}
#footer {
    clear: both;
}

　ここでは高さなどのプロパティーを入れていませんが便宜自身で入れてください。基本的には#alphaと#betaをfloatで左右に振り分けます。この際幅に注意してください。#containerの幅と#alpha＋#betaの幅が同じでなくてはいけません。またpaddingやborderを指定すると幅が変わってくるのでその都度調整してください。この幅を間違えるとどちらかが下段に行ってしまいます。