Form layout using CSS

Question

I'm aware that there are already a bunch of questions about form layout using CSS versus Tables. On the whole, I think CSS is the way to go, but all the CSS solutions I've seen have the drawback of "hard coding" the width of the labels and/or input fields.

The result is that one or two custom rules needs to be added for each form, assuming that the maximum width of the labels are different in each case.

Is there a way that I can style forms, such that it will automagically line up the labels and inputs regardless of how long the labels are?

Answer 1

Have a look at the form on the left handside at this URL http://www.blueprintcss.org/tests/parts/forms.html

If you place label on 1 line and the input box on another line then you don't have to worry about the alignment of labels. Style it a bit more you will have a clean and nice web2.0 like form

Cheers

Answer 2

Personal opinion: use a table.

Every time you write something like

label {
    width: 150px; /* or whatever width */
}

then you are mixing content and presentation because the value of the label can only be calculated if you know what it will contain, which goes against the principles of the semantic-CSS purists.