Two column style list with css

Question

I am trying to execute ASP.NET MVC 2 by going through the NerdDinner tutorial. But, apparently, version 2 of MVC does not create the details page in the same way as in the tutorial, and you get divs with css classes on them in style. However, I want to get a style in which each label will follow on the same line with the field, and I cannot do this, I get them one above the other, or if I try to use floats, strange things happen (maybe because that I don’t know exactly how to use it in this situation, where every other div should be on the same line). Here is 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 to get a display label and a display field for each "record" to display on one line?

Answer 1

Same as @Salil's answer, but instead of using <br/> you can use a different div around each "line" and manually set the margin. It just gives you 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 the <div style="clear:both"/> at the end of reset alignment.

Answer 2

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

This worked for me out of the box without changing the HTML markup, but YMMV ...

Specifying the label field width, as suggested by Anders, helps them line up.

Answer 3

Try

 .display-label{ float:left; } .display-field{ float:left; } 

and

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