Question

I’ve been looking for a way to produce the following HTML table with CSS:

<style type="text/css">
    table.frm tr td { vertical-align: top; padding-right: 10px; }
</style>

<table class="frm">
  <tr>
    <td rowspan="2">Label 1:</td>
    <td><input type="text" /></td>
    <td rowspan="2">Label 2:</td>
    <td><input type="text" /></td>
  </tr>
  <tr>
    <td>Validation Message 1</td>
    <td>Validation Message 2</td>
  </tr>
  <tr>
    <td rowspan="2">Label 3:</td>
    <td><input type="text" /></td>
    <td rowspan="2">Label 4:</td>
    <td><input type="text" /></td>
  </tr>
  <tr>
    <td>Validation Message 3</td>
    <td>Validation Message 4</td>
  </tr>
</table>

The problem I’ve been having when I try to replace this with divs is that I can’t align both the columns and the rows. I’ve tried using floats to align the columns, but then I loose the vertical alignment of the rows. But if I use a clear to align the rows, I loose the horizontal alignment of the columns.

Many of the examples I’ve seen for converting tables to divs use fixed or percentage widths, but I want the layout to have the same fluid behavior of the table since the validation messages may or may not appear and the labels/fields will have varying sizes.

Is there a designer out there who can show me how this layout can be achieved without tables?

Answer 1

This is not a problem with display (CSS2), but it requires IE7+. Please see this example fiddle:

Markup:

<form>
    <span>
        <label for="edit1">First label:</label><input id="edit1" type="text" />
        <label for="edit2">Second label:</label><input id="edit2" type="text" />
    </span>
    <span>
        <br /><p>That sounds right!</p>
        <br /><p>Problem!</p>
    </span>        
    <span>
        <label for="edit3">3:</label><input id="edit3" type="text" />
        <label for="edit4">Fourth and last label:</label><input id="edit4" type="text" />
    </span>
    <span>
        <br /><p>No succes. Try again and enter another value.</p>
        <br /><p>Wait...</p>
    </span>        
</form>

Style sheet:

form {
    display: table;
}
form span {
    display: table-row;
}
form span * {
    vertical-align: top;
    padding-right: 10px;
    display: table-cell;
}