I just spent some time styling a complex(?) web form with CSS. Some basic requirements:

• Any number of input elements on each form line
• The first label on each line to be a fixed width – like a column
• Able to indicate required/optional/readonly fields
• Able to move things around fairly easily – particularly after a few months of not touching the code (and in my opinion counting td/tr and cell spanning is not easy)

Steps to achieve this result:

1. First enclose each form line with a div (class=row).
2. Add an indicator to the first label element on each row (class=first).
3. Enclose the relevant pairs – label and input/select/etc – with a span (class=optional/readonly/required).
4. Add CSS to suit the requirements.

So, it took a bit longer than it should have…

The label element does not have a width property unless you float it.

When floating the ‘first’ label, the text changed vertical alignment relative to the other labels in the line. I could fix it by applying a margin to the ‘first’ label, but when I changed font-size (or the text size via the browser) the alignment was out again.

The problem seemed to be caused by floating the label for for a font-size smaller than height of the input box. The simple fix seems to be in adding a line-height to all labels.

You can see the result (HTML + CSS) of this excursion here.