Style list of divs as 2 column layout with css

Question

I'm trying out ASP.NET MVC 2 by going through the "NerdDinner" tutorial. But apparently version 2 of MVC doesn't create a Details page the same as in the tutorial, and you get divs with css classes on them to style. However, I want to get the style where each label is followed on the same line with the field, and I can't do it, I get them on top of each other, or if I try using floats weird things happen (probably because I don't know exactly how to use it in this situation, where every other div should be on the same line). Here's the generated html for the Details page:

<fieldset>
        <legend>Fields</legend>
        <div>
        <div class="display-label">DinnerID</div>
        <div class="display-field"><%: Model.DinnerID %></div>

        <div class="display-label">Title</div>
        <div class="display-field"><%: Model.Title %></div>

        <div class="display-label">EventDate</div>
        <div class="display-field"><%: String.Format("{0:g}", Model.EventDate) %></div>

        <div class="display-label">Description</div>
        <div class="display-field"><%: Model.Description %></div>

        <div class="display-label">HostedBy</div>
        <div class="display-field"><%: Model.HostedBy %></div>

        <div class="display-label">ContactPhone</div>
        <div class="display-field"><%: Model.ContactPhone %></div>

        <div class="display-label">Address</div>
        <div class="display-field"><%: Model.Address %></div>

        <div class="display-label">Country</div>
        <div class="display-field"><%: Model.Country %></div>

        <div class="display-label">Latitude</div>
        <div class="display-field"><%: String.Format("{0:F}", Model.Latitude) %></div>

        <div class="display-label">Longitude</div>
        <div class="display-field"><%: String.Format("{0:F}", Model.Longitude) %></div>

        <div class="display-label">IsValid</div>
        <div class="display-field"><%: Model.IsValid %></div>
        </div>
    </fieldset>

How do I get the display-label and display-field for each "entry" to appear on the same line?

Answer 1

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

.display-field{
  float:left;
  clear:right;
}

This worked for me out of the box with no change in HTML markup, but YMMV...

Specifying the width of the label field as suggested by Anders works to help them line up.

Answer 2

Same as @Salil's answer, but instead of using a <br/> you can use another div around each "row" and set the margin manually. It just gives you a litte more control.

.itemrow
{
    margin-bottom: 10px;
}

<div class="itemrow">
    <div class="display-label">DinnerID</div>
    <div class="display-field"><%: Model.DinnerID %></div>
</div>
<div class="itemrow">
    <div class="display-label">Title</div>
    <div class="display-field"><%: Model.Title %></div>
</div>

Also, don't forget a <div style="clear:both"/> at the end to reset the alignment.