Question

I am attempting to get a MVC 3 generated ‘Create’ page to have all the editor-labels/textboxes float inside the fieldset.

I wrapped the scaaffolded div boxes in another div:

     <div class="editor-float">
        <div class="editor-label">
            @Html.LabelFor(model => model.EntryDate)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.EntryDate)
            @Html.ValidationMessageFor(model => model.EntryDate)
        </div>
    </div>

And then I added this CSS code:

.editor-float
{
   margin-right: 5px;
   float: left;
   position: relative;
}

The issue is that most of the div’s float nicely but not all.

A picture of the behaviour (Value4 is sitting in a ‘row’ by itself):

Is there a better CSS property that I could use to get things flowing better?

Answer 1

What you want is clear property. Something like clear: left;
If you have multiple div elements with class editor-float, then define .editor-float like:

.editor-float 
{ 
    margin-right: 5px; 
    float: left; 
    position: relative; 
    clear: left;
}