css - 2列のdivを持つインラインテキスト

Question

2列のテーブルを置き換えるためにdivを使用します。1列目のテキストが長すぎると、見栄えがよく表示されません。例：「Spoken」は「English」とインラインである必要がありますが、前の2列目の「Loans、Dental」ではありません。

#wrap {
 width:280px;
 margin:0 auto;
}
.left_col {
 float:left;
 width:30%;
}
.right_col {
float:right;
width:70%;
}

http://jsfiddle.net/HtyXP/

Answer 1

これは、幅を280px（#wrap）に設定したことが原因です。Medical, Education support, Loans, Dentalは非常に長い文であり、の70％がオーバーフローしていright_colます。と同じことLanguage spoken。

すべてを美しく見せるためには、この値を増やす必要があります。400pxの幅が機能するはずです。

Answer 2

これを修正するために私が見る唯一の方法は、テーブル、またはdivに必死に固執したい場合はこれです：

<div id="wrap">
  <div class="row">  
    <div class="left_col">Industry:</div>
    <div class="right_col">Insurance</div>
  </div><div class="row">
    <div class="left_col">Co. Size:</div>
    <div class="right_col">201 - 500 Employees</div>
  </div><div class="row">
    <div class="left_col">Working Hours:</div>
    <div class="right_col">Regular hours, Mondays-Fridays</div>
  </div><div class="row">
    <div class="left_col">Benefits:</div>
    <div class="right_col">Medical, Education support, Loans, Dental</div>
  </div><div class="row">
    <div class="left_col">Spoken Language:</div>
    <div class="right_col">English</div>
  </div>
</div>