解説

<table>を使用したレイアウトでは、連続したセル（例: <tr><td>左カラム</td><td>右カラム</td></tr>など）を使う事で簡単に実現できた、左右の２段組レイアウトですが、CSS でどのように表現するかで悩む方も多いかと思いますが、これは float と width を使用する事によって、簡単に実現する事が出来ます。

まず、<div> で、２つのカラム（ＡのカラムとＢのカラム）を用意します。
Ａのカラムが左側に、Ｂのカラムが右側に配置される例を考えましょう。その際、テキストを画像に回り込ませる、<img src="url" align="left"> のalign のように、ＢのカラムがＡのカラムに対して「回り込んでいれば良い」と考えます。

<div>で囲まれたものは、テキストのように回り込まず、左右に配置されるのがミソです。この性質を活かすと、下記のようになります。

<style type="text/css">

 div.LeftColumn{
  width: 49%;
  float: left;
 }
 
 div.RightColumn{
 float: left;
  width: 49%;
 }
 
</style>


<div class="LeftColumn">
 左カラムの中身をここに
</div>

<div class="RightColumn">
 右カラムの中身をここに
</div>

注意点

原則として上記の記述で左右に配置する事が出来るのですが、このレイアウトにはうんざりするほどたくさんの注意点があります。

• 足して 100% の配置は出来ない
  例えば左右のカラムの比率が 50% 50%のものは、綺麗に横に配置出来ません。49%ずつにしてあげるなど、合計で100%にしないとうまく行くようです。
  
• width の記述は並列するカラムすべてに記述する
  左側のカラムを49%と記述したから、右側のカラムでは指定しなくても残りのパーセンテージが摘要されるだろう、と思われるかもしれませんが、それはうまく行きません。全てのカラムで width を記述する必要があります。
• float: left は並列するカラムすべてに記述する
  
• 並列を終わらせるには clear を指定
  並列（回り込み）を終了させるには、 clear: both; のように、 clear を指定することで終了させる事が出来ます。ただし clear は完全ではない様子で、<br clear="all">で確実に回り込みを解除してあげる必要がある場合もあります。