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?

score 16 · Answer 1 · answered Jan 03 '11 at 20:39

16

.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.

answered Jan 03 '11 at 20:39

caveman

728
6
9

from [here](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div?rq=1) i just centered the Details view content this way: `

` and used the above css, thank you, hope helps someone. – Shaiju T Mar 30 '15 at 15:08

score 4 · Accepted Answer · answered Jun 16 '10 at 17:27

4

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.

answered Jun 16 '10 at 17:27

Ryan

4,303
3
24
24

Thanks, this works. But again, see the comment for Salil about my hopes to be able to do it solely by css... If it's not possible I'll have to accept that, it just seemed to me there should be a way... – Anders Jun 16 '10 at 18:04
You might be able to just use `.display-label { clear:both; float:left }`. I always have a wrapper div so I've never tried this. – Ryan Jun 16 '10 at 18:31
Great, that worked! Thanks, that's the answer I was looking for. Now there's just one problem: If I place borders around them to sort of emulate a table, the display-fields are right up against the border, and padding doesn't seem to help because it seems to refer to the leftmost edge of the "table" (where the display-label is)... Any idea how to get around this? – Anders Jun 16 '10 at 20:11
It works fine with display-label, but nothing happens with display-field... I have set a width of 200px for the display-label. – Anders Jun 16 '10 at 21:06

score 2 · Answer 3 · answered Jun 16 '10 at 16:48

2

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>

answered Jun 16 '10 at 16:48

Salil

46,566
21
122
156

Thanks, but it didn't quite work out as expected. The rows all started after the previous row ended (horizontally) Also, I was hoping there would be a way to style the default generated details view without changing the html, only by using css... – Anders Jun 16 '10 at 18:03

Style list of divs as 2 column layout with css

3 Answers3

Linked