CSSでfloatをかけた2カラムレイアウトを縦に並べたいのだが、ズレる。 #CSS

いまちょっと困っているところ。

左右の2カラムからなり、右カラムはいくつかのボックスに分かれているレイアウトを作っている。
その際、単純にfloat:leftとrightで左右に配置しているのですが、floatは横に並べようとするため、
左カラム幅が少ないとき複数ボックスからなる右カラムがずれてしまう。

↓こんなかんじ。rightのboxをタテに並べたいのだが横に回り込んでしまう。
https://img.skitch.com/20120108-j5j4h2bdycmw9xfgak7dr8kbpu.jpg

簡略化した構造とCSSは以下の通り。

<body>
  <div id="content">
    <div id="left_content">
      <div class="box">
        left
      </div>
    </div>
    <div id="right_content">
      <div class="box">
        right-1
      </div>
      <div class="box">
        right-2
      </div>
      <div class="box">
        right-3
      </div>
    </div>
  </div>
</body>

#content {
  position: relative;
  width: 1020px;
  margin: auto auto;
  padding: 20px 0 0;
}
#left_content .box {
  float: left;
  width: 750px;
  border: 1px solid #C5D5DD;
  padding: 10px;
}
#right_content .box {
  float: right;
  width: 200px;
  border: 1px solid #C5D5DD;
  margin-bottom: 20px;
  padding: 10px;
}

強引に解決するなら左カラムのmin-heightを定義すればよいとは思うのだが、
右カラムに含まれるボックスの高さはある程度動的に変わる可能性があるため、CSSで解決できる問題であればそうしたい。