Question

This is probably a dump question but I can’t find a way to align the second elements on the view. Tried using width on the display-labels but it does not affect anything; the display-fields start immediatelly after the labels. What should to manipulate the width of the labels?

Update

<div>
    <div class="display-label">Name:</div >
    <div class="display-field"><%: Model.personalInfo.FirstName + " " + Model.personalInfo.LastName%></div >
</div>
<div>
    <div class="display-label">Date of Birth:</div >
    <div class="display-field"><%: Model.personalInfo.DOB.ToShortDateString() %></div >
</div>

Here is the css

.display-label
{
margin: 0.5em 0;
font-weight:bold;
padding: 0.5em 0;
width: 10em;
float: left;
}

.display-field
{
margin: 0.5em 0;
padding: 0.5em 0;
}

Answer 1

Put the labels in divs with float: left rule and fixed width. Also put the values in divs.

<div>
    <div class="display-label">Name:</div>
    <div><%: Model.personalInfo.FirstName + " " + Model.personalInfo.LastName%></div>
</div>
<div>
    <div class="display-label">Date of Birth:</div>
    <div><%: Model.personalInfo.DOB.ToShortDateString() %></div>
</div>

and then:

.display-label {
    float: left;
    width: 200px;
}

and a live demo.

Or if for some cryptic reason you cannot change those spans to divs you could also display them as blocks (a.k.a divs):

.display-label {
    display: block;
    float: left;
    width: 200px;
}

.display-field {
    display: block;
}