Как правильно выровнять содержимое div?

Question

Вот мой макет,

Сводный вид http://img689.imageshack.us/img689/2500/yuidtsum.jpg

Я использую один div и много диапазонов для получения вышеуказанного вида ... Посмотрите на все строки, они не выровнены должным образом ...

<div class="resultsdiv"><br />
<span style="width:200px;" class="resultName">' + employee.Emp_Name + '</span>
<span class="resultfields" style="padding-left:100px;">Category&nbsp;:</span>&nbsp;
<span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br />
<span id="SalaryBasis" class="resultfields">Salary Basis&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.SalaryBasis + '</span>
<span class="resultfields" style="padding-left:25px;">Salary&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.FixedSalary + '</span>
<span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address&nbsp;:</span>&nbsp;
<span class="resultfieldvalues">' + employee.Address + '</span>
</div>

и мой CSS

.resultsdiv
{
    background-color: #FFF;border-top:solid 1px #ddd; height:50px; border-bottom:solid 1px #ddd; padding-bottom:15px; width:450px; 
}
.resultseven { background-color: #EFF1f1; }
.resultshover { background-color: #F4F2F2; cursor:pointer; }

.resultName
{
    font-size:125%;font-weight:bolder;color:#476275;font-family:Arial,Liberation Sans,DejaVu Sans,sans-serif;
}
.resultfields
{
    font-size:110%;font-weight:bolder;font-family:Arial,Liberation Sans,DejaVu Sans,sans-serif;
}
.resultfieldvalues
{
    color:#476275;font-size:110%;font-weight:bold;font-family:Arial,Liberation Sans,DejaVu Sans,sans-serif;
}

Любое предложение для правильного выравнивания .... Должен ли я использовать divs insted of spans, чтобы получить это правильно выровнен ...

Answer 1

На мой взгляд, это тип данных, которые должны быть в таблице. Это не макет, это табличные, повторяющиеся данные.

Answer 2

Вот черновик переписанного HTML и CSS. Я не проверял это, но это должно приблизить вас. Опубликовать скриншот, если он не работает.

HTML

<div class="resultsdiv">
  <div class="name">' + employee.Emp_Name + '</div>
  <div class="category"><span>Category :</span> ' + employee.Desig_Name + '</div>
  <div class="salary_basis"><span>Salary Basis :</span> ' + employee.SalaryBasis + '</div>
  <div class="salary"><span>Salary :</span> ' + employee.FixedSalary + '</div>
  <div class="address"><span>Address :</span> ' + employee.Address + '</div>
</div>

CSS

.resultsdiv { color: black }
.resultsdiv span { color: #666 }
.resultsdiv { width: 600px}
.resultsdiv div { float: left }
.resultsdiv .name { width: 230px; padding-right 20px; }
.resultsdiv .category { width: 350px }
.resultsdiv .salary_basis { clear: left; width: 180px; padding-right: 20px }
.resultsdiv .salary { width: 180px; padding-right: 20px }
.resultsdiv .address { width: 200px; }