Question

I’ve built an edit page with field-label divs and field-editor divs as per usual ASP.Net MVC, resulting in the following HTML:

<div class="editor-label">
  <label for="Code">Project Code</label>
</div>
<div class="editor-field">
  <input id="Code" name="Code" type="text" value="" />
</div>

The above pair of divs would be repeated for as many editable fields there are on my form. By default these just display one below the other on the page. What I’d like to achieve is to use CSS to display the page in a table layout. So my CSS is something like this:

.field-label, .field-editor{
display: table-cell;
}

This just displays them all in cells next to each other, wrapping at the end of the browser window. How could I force a new row after each field-editor div (or before each field-label div) without adding additional markup to the view? I understand that this would be simple by adding additional markup to the view, like a new div to which I assign display: table-row. But I’d have to add this markup between each set of label/editor combination, and that just feels like a violation of the DRY principle. So I’d like to do this without needing to do this additional markup.

Answer 1

Given the above HTML, the following CSS will work:

.editor-label, .editor-field {
    display: inline-block;
    width: 48%;
}

.editor-label {
    text-align: right;
}

This will allow the elements to share the same line, and take an assigned width (in this case relative to the width of the parent element). The text-align declaration is simply to place the text of the label visually close to the input element.

JS fiddle demo.

You could, of course, achieve the same result using different widths and without wrapping the the label and input elements needlessly in divs.

With a slightly more tidied-up version:

label, input {
    display: inline-block;
}

label {
    text-align: right;
    width: 20%;
}

input {
    width: 30%;
    margin-right: 30%;
}

JS Fiddle demo.

The margin-right is declared simply so that the cumulative width of the label, the input and its margin-right leaves insufficient space for the next label to occupy the same line.