CSS table layout with fluid widths - html

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;
}

Answer 2

The problem you're facing is you are looking at each cell as its own little block of data. You need to look at the bigger picture. What is that collection of data? Is it actually a list of things? Does it belong in a ul or dl?
Quit trying to make this look like a table with different elements when it's not a table at all. And tables should never be used for layout.

Answer 3

Fluid is very vague term, by fluid do you mean its width can expand and contract like a table does for different size screens, or when the browser window is resized? Or do you want he column widths to all adjust to same width as the cell with the longest/largest content?
The first is done like so
<div style="position: absolute; width: 100%;">
<div style="position: relative; width: 100%; clear: both;">
<div style="position: relative; width: 50%; float: left;"> </div>
<div style="position: relative; width: 50%; float: left;"> </div>
</div>
<div style="position: relative; width: 100%; clear: both;">
<div style="position: relative; width: 50%; float: left;"> </div>
<div style="position: relative; width: 50%; float: left;"> </div>
</div>
</div>
That should simulate two rows with two columns in each row and widths are based on the screen size.
The second with the columns adjusting based on the content size.
<div style="position: absolute; width: 100%;">
<div style="position: relative; float: left;">
<div style="position: relative; min-width: 1%; max-width: 75%;"> </div>
<div style="position: relative; min-width: 1%; max-width: 75%;"> </div>
</div>
<div style="position: relative; float: left;">
<div style="position: relative; min-width: 1%; max-width: 75%;"> </div>
<div style="position: relative; min-width: 1%; max-width: 75%;"> </div>
</div>
</div>
That is two columns with with two rows each. Set the "min-width" and "max-width" to whatever you need. I don't think I have ever had a reason to test anything like this, so if it doesn't work you could try setting "display: inline" for each row.
And If neither of these work try posting your test code. I am certain you can make a tables out of divs. A while back after several years of not using tables I inadvertently made a site, that should have used tables, out of divs. What your looking to do can be done it is just a matter of working the CSS.