CSS for dynamic form labels width

Question

I'm currently working on refactoring one of our Form Controller so that we can use it for a public facing site. Currently it's generating a table layout for the forms, but I am trying to get it done using CSS forms.

I am trying to reproduce something that would look like this http://www.stylephreak.com/uploads/source/cssforms/cssform.php

Issue I am having is that every CSS form examples I find seems to assume a fixed width for the left column label. I have no control over what goes in the label in my case, it's coming from a user editable translation bank. With a table it's super easy I would simply use whitespace:nowrap; and the longest label would decide on the td's width and everyone is happy.

Is it possible to do something similar with CSS? I've tried using min-width and forcing it not to wrap. This worked but only pushes the current control right and screwed up the alignment, not to mention that min-width isn't supported in IE 6.

Is it really that bad to use a table for form layouts? It's tabular data and make sense when linearized after all no?

Answer 1

To my knowlegde forms always occupy 100% of the available width. You could use that.

If it's allowed to fill up the whole width of the provided container for this form, then this seems a valid answer:

The sample fiddle.

The minor disadvantage in this case is to choose the ratio between the width of the labels and the inputs.

Answer 2

You can set the <label> css to display: table-cell and the containing <div> to display: table-row. This will mimic the behavior of using a table without actually using a <table>.

<div style="display: table-row">
    <label style="display: table-cell; padding: 0 1em; text-align: right;" for="fm-firstname">First Name:</label>
    <input type="text" name="fm-firstname" id="fm-firstname" />
</div>
<div style="display: table-row">
    <label style="display: table-cell; padding: 0 1em; text-align: right;" for="fm-lastname">Last:</label>
    <input type="text" name="fm-lastname" id="fm-lastname" />
</div>

This will look great in any recent browser (Firefox, Chrome, IE8+). In IE7, the textboxes won't be aligned correctly.