Question

I use div to replace table for 2 column. I have problem to display them in good view if 1st column text too long. For example: ‘Spoken’ should be inline with ‘English’ but not ‘Loans, Dental’ from previous 2nd column.

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

http://jsfiddle.net/HtyXP/

Answer 1

the only way i see to fix this is either a table, or if you want to stick to divs desparately this:

<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>