Question

I use a User Control to display a bunch of fields in an ASP.NET MVC application.
eg.

    <div class="metadata-left metadata">
        <div>
            Default Domain:</div>
        <br />
        <div>
            Disabled:</div>
        <br/>
        </div>
    <div class="metadata-right metadata">
        <div>
            <%= Html.EditorFor(c => c.IsDefault) %></div>
        <br />
        <div>
            <%= Html.EditorFor(c => c.IsDisabled) %></div>
        <br />
        </div>

In the stylesheet, I have the following classes:

.metadata-left
{
    float: left;
    width: auto;
    text-align: right;
}
.metadata-right
{
    float: left;
    width: 68%;
    padding-left: 3%;
    text-align: left;
}
.metadata div
{
    height: 20px;
}

How do I get these fields to display side by side? Right now I get them all under one column one after another.

Answer 1

You might have more success organising your elements like this

<div class="metadata-field">
  <div class="metadata-left metadata">
        Default Domain:
  </div>
  <div class="metadata-right metadata">
        <%= Html.EditorFor(c => c.IsDefault) %>
  </div>
</div>
<div class="metadata-field">
  <div class="metadata-left metadata">
        Disabled:
  </div>
  <div class="metadata-right metadata">
        <%= Html.EditorFor(c => c.IsDisabled) %>
  </div>
</div>

With CSS:

.metadata-field {
    clear:both;
}
.metadata-left
{
    float: left;
    width: auto;
    text-align: right;
}
.metadata-right
{
    float: left;
    width: 68%;
    padding-left: 3%;
    text-align: left;
}
.metadata div
{
    height: 20px;
}​

You can make your adjustments to further change the layout.

See: http://jsfiddle.net/LbTg9/