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

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

Well, here's a solution that is a bit unconventional, but I think the simplicity should work for all browsers.

The sample fiddle.

Accessibility doesn't seem to be a problem, for both keyboard and mouse control act as whished. The main disadvantage of course is that this page does not render well if CSS is turned off. Are there somewhere statistics about that? And also don't I know how screen readers will react to this wantonness.

Answer 3

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.