How to align all fields as label width grows
- by TheCloudlessSky
I have a form where the labels are on the left and the fields on the right. This layout works great when the labels have small amounts of text. I can easily set a min-width on the labels to ensure they all have the same distance to the fields. In the first picture below, this works as expected. A problem arises when the label's text becomes too long, it'll either overflow to the next line or push the field on the same line over to the left (as seen in picture 2).
This doesn't push the other labels so it is left with a "jagged" look. Ideally, it should like to style it as picture 3 with something like the following markup:
<fieldset>
<label>Name</label><input type="text" /><br />
<label>Username</label><input type="text" />
</fieldset>
I created a jsFiddle to show the issue.
Of course, the easy cross-browser way to solve this would be to use tables. That just creates tag-hell for something that should be so simple. Note: this does not need to support IE6.
