float: left;とfloat: right; を交互に使って、
ボックス（要素）を左右に振り分ける方法があります。
以下に例を書いてみます。
▽CSSベースのHTML
左右で2コイチのボックスを下方向へ連続させる。
（左用・右用、2つのクラスを用意）
------------------------------------------------------------
CSSに関する解説も
ソース内に入れ込んでいます。
------------------------------------------------------------
＜例＞
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>左右で2コイチのボックスを下方向へ連続させる 左用・右用、2つのクラスを用意</title>
<style type="text/css">
<!--
/*
【01】
ブラウザ画面とHTML表示領域との間隔を20pxにする。（画面の端に20pxの隙間を空ける）
ページ内の文字サイズを、初期状態の100％に設定する。
ページ内の文字色を濃いグレー（#444444）にする。
ページ内に配置した要素を中央揃えにする。
*/
body {
margin: 20px; font-size: 100%; color: #444444; text-align: center;
}
/*
【02】
ページ内の全ての<dl></dl>に対して、
横幅を350pxにする。
高さ幅を5文字分にする。
余白を下1文字分空ける。
*/
dl{
width: 350px; height: 5em; padding-bottom: 1em;
}
/*
【03】
ページ内の全ての<dt></dt>に対して、
罫線を下側に付ける（太さ：3px、スタイル：実線、色：薄いオレンジ色）。
間隔を下のみ0.5文字分空ける。
余白を下のみ0.5文字分空ける。
文字サイズを親要素に対して108.3％（1.083倍）にする。
文字色を赤（#ffff00）にする。
文字を太字にする。
行間を文字の1.4倍にする。
*/
dt{
border-bottom: 3px solid #ffcccc; margin-bottom: 0.5em; padding-bottom: 0.5em; font-size: 108.3%; color: #ffff00; font-weight: bold; line-height: 1.4em;
}
/*
【04】
ページ内の全ての<dd></dd>に対して、
間隔を上下左右全て0pxにする。
文字サイズを親要素に対して100％（等倍）にする。
行間を文字の1.4倍にする。
*/
dd{
margin: 0px; font-size: 100%; line-height: 1.4em;
}
/*
【05】
id名「maincontentbox」に対して、
横幅を760pxにする。
間隔を上下0px、左右は自動（＝中央揃え）にする。
格納する要素を中央揃えにする。
*/
#maincontentbox{
width: 760px; margin: 0px auto; text-align: center;
}
/*
【06】
id名「layoutbox」に対して、
横幅を730pxにする。
間隔を上下0px、左右は自動（＝中央揃え）にする。
格納する要素を左揃えにする。
*/
#layoutbox{
width: 730px; margin: 0px auto; text-align: left;
}
/*
【06】
id名「layoutbox」内の<dl></dl>クラス名「left」に対して、
左へ横並びさせる。
*/
#layoutbox dl.left{
float: left;
}
/*
【07】
id名「layoutbox」内の<dl></dl>クラス名「right」に対して、
右へ横並びさせる。
間隔を左は自動、右0px空ける。（＝親ボックスの右端に位置させる）
*/
#layoutbox dl.right{
float: right; margin-left: auto; margin-right: 0px;
}
/*
【08】
クラス名「clear」に対して
左右の横並びを解除させる。
*/
.clear{
clear: both;
}
-->
</style>
</head>
<body>
<div id="maincontentbox">
<div id="layoutbox">
<dl class="left">
<dt>タイトル001</dt>
<dd>本文001</dd>
</dl>
<dl class="right">
<dt>タイトル002</dt>
<dd>本文002</dd>
</dl>
<dl class="left">
<dt>タイトル003</dt>
<dd>本文003</dd>
</dl>
<dl class="right">
<dt>タイトル004</dt>
<dd>本文004</dd>
</dl>
<dl class="left">
<dt>タイトル005</dt>
<dd>本文005</dd>
</dl>
<br class="clear" />
</div>
</div>
</body>
</html>
2コイチの右側のボックス（<dl></dl>）には、
左の間隔が自動（margin-left: auto;）が設定されているので、
左右のボックスの間隔は
730px-（350px × 2）= 30px 空くことになります。
--------------------------------------------------------------------------------------------------------------
【MEMO 2コイチボックス <dl></dl>に関して その1】
2コイチボックス <dl></dl> に設定したmargin-left: auto;の替わりに、
margin-left: 30pxと設定しても大丈夫ですが、
後々、横幅を変更した際に、margin-left: auto; だと、
自動で間隔が空いてくれるので便利です。
【MEMO 2コイチボックス <dl></dl>に関して その2】
高さ幅に加えて、余白を下のみに設定していますが、
余白の替わりに、高さ幅をその分増やす方法もあります。
【MEMO 2コイチボックス <dl></dl>に関して その3】
高さ幅は、可変で使える方が良いので、できれば無くしたいところですが、
もし、設定をしなかった場合、左右のボックス要素の内容量が違う場合に、
その下の左右ボックスの上のツラがあわない（段違いに）なってしまいます。
他の対策として、2コイチのボックスのHTMLソースの後に、
横並び解除（clear）を、<br>などに設定しておいて、
記述しておくことも考えられますが、
ボックスを移動させたときに、
必要箇所全ての<br>を移動させなくてはならないこともあり、
長いHTMLソースだと、結構手間がかかります。
--------------------------------------------------------------------------------------------------------------
この方法では、
左ボックスのクラス（class="left"）、右ボックスのクラス（class="right"）、と
クラスを2つを作る必要があるので、ボックス要素（例の場合では<dl></dl>）を移動させた場合
移動後にクラスを左、右用に書き換える必要が出やすく、いまひとつ変更や更新がしずらいものです。
そこで、同じクラス名で自動的に左右に振り分けられるようにしてみます。
▽変更ポイントは、
--------------------------------------------------------------------------------------------------------------
１）横並びさせるのに、float: left; のみ（もしくはfloat: right; のみ）を使用する。
２）ボックス要素の左右に同じ余白（padding-left、padding-right）を設定する。
--------------------------------------------------------------------------------------------------------------
です。
▽CSSベースのHTML
左右で2コイチのボックスを下方向へ連続させる。
（左用・右用、1つのクラスで共用）
------------------------------------------------------------
CSSに関する解説も
ソース内に入れ込んでいます。
------------------------------------------------------------
＜例＞
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>左右で2コイチのボックスを下方向へ連続させる 左右振り分け用のクラスは1つだけ</title>
<style type="text/css">
<!--
/*
【01 ※先の例と同じ】
ブラウザ画面とHTML表示領域との間隔を20pxにする。（画面の端に20pxの隙間を空ける）
ページ内の文字サイズを、初期状態の100％に設定する。
ページ内の文字色を濃いグレー（#444444）にする。
ページ内に配置した要素を中央揃えにする。
*/
body {
margin: 20px; font-size: 100%; color: #444444; text-align: center;
}
/*
【02 ※先の例と同じ】
ページ内の全ての<dl></dl>に対して、
横幅を350pxにする。
高さ幅を5文字分にする。
余白を下1文字分空ける。
*/
dl{
width: 350px; height: 5em; padding-bottom: 1em;
}
/*
【03 ※先の例と同じ】
ページ内の全ての<dt></dt>に対して、
罫線を下側に付ける（太さ：3px、スタイル：実線、色：薄いオレンジ色）。
間隔を下のみ0.5文字分空ける。
余白を下のみ0.5文字分空ける。
文字サイズを親要素に対して108.3％（1.083倍）にする。
文字色を赤（#ffff00）にする。
文字を太字にする。
行間を文字の1.4倍にする。
*/
dt{
border-bottom: 3px solid #ffcccc; margin-bottom: 0.5em; padding-bottom: 0.5em; font-size: 108.3%; color: #ffff00; font-weight: bold; line-height: 1.4em;
}
/*
【04 ※先の例と同じ】
ページ内の全ての<dd></dd>に対して、
間隔を上下左右全て0pxにする。
文字サイズを親要素に対して100％（等倍）にする。
行間を文字の1.4倍にする。
*/
dd{
margin: 0px; font-size: 100%; line-height: 1.4em;
}
/*
【05 ※先の例と同じ】
id名「maincontentbox」に対して、
横幅を760pxにする。
間隔を上下0px、左右は自動（＝中央揃え）にする。
格納する要素を中央揃えにする。
*/
#maincontentbox{
width: 760px; margin: 0px auto; text-align: center;
}
/*
【06】
id名「layoutbox」に対して、
横幅を760pxにする。
格納する要素を左揃えにする。
*/
#layoutbox{
width: 760px; text-align: left;
}
/*
【07】
id名「layoutbox」内の<dl></dl>クラス名「common」に対して、
左へ横並びさせる。
余白を左15px、右15px空けるようにする。
*/
#layoutbox dl.common{
float: left; padding-left: 15px; padding-right: 15px;
}
/*
【08 ※先の例と同じ】
クラス名「clear」に対して
左右の横並びを解除させる。
*/
.clear{
clear: both;
}
-->
</style>
</head>
<body>
<div id="maincontentbox">
<div id="layoutbox">
<dl class="common">
<dt>タイトル001</dt>
<dd>本文001</dd>
</dl>
<dl class="common">
<dt>タイトル002</dt>
<dd>本文002</dd>
</dl>
<dl class="common">
<dt>タイトル003</dt>
<dd>本文003</dd>
</dl>
<dl class="common">
<dt>タイトル004</dt>
<dd>本文004</dd>
</dl>
<dl class="common">
<dt>タイトル005</dt>
<dd>本文005</dd>
</dl>
<br class="clear" />
</div>
</div>
</body>
</html>
▽変更ポイントに関する注釈
--------------------------------------------------------------------------------------------------------------
ポイント２）の余白に関してですが、
余白の替わりに間隔（margin-left、margin-right）でも良さそうなものですが、
Win IE6.0では、marginの設定があると、横並びが解除されてしまいます。
（Win：IE7.0、FF2.0、Mac：Safari3.0、FF2.0では、marginでOKです）
ただし、余白（padding-left、padding-right）では、横幅（width）で設定した幅に、
さらに幅がプラスされてしまうので、注意が必要です。
--------------------------------------------------------------------------------------------------------------
変更後の方法だと、
左右どちらにボックス（<dl></dl>）があったかを気にせずに、
（HTMLソース内の）上下で移動が可能です。
【CSSベースのHTMLコーディングの最新記事】
