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?

Accepted Answer

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

Form layout using CSS

Solution

Problem