Style list of divs as 2 column layout with css
- by Anders Svensson
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?
