How to align this div contents properly?
- by Pandiya Chendur
Here is my layout,
I am using one div and many spans for getting the above view... Look at all the rows ther are not properly aligned...
<div class="resultsdiv"><br />
<span style="width:200px;" class="resultName">' + employee.Emp_Name + '</span>
<span class="resultfields" style="padding-left:100px;">Category :</span>
<span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br />
<span id="SalaryBasis" class="resultfields">Salary Basis :</span> <span class="resultfieldvalues">' + employee.SalaryBasis + '</span>
<span class="resultfields" style="padding-left:25px;">Salary :</span> <span class="resultfieldvalues">' + employee.FixedSalary + '</span>
<span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address :</span>
<span class="resultfieldvalues">' + employee.Address + '</span>
</div>
and my css are
.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;
}
Any suggestion to get it aligned properly.... Should i use divs insted of spans to get this
properly aligned...