How to align all fields as label width grows

Posted by TheCloudlessSky on Stack Overflow See other posts from Stack Overflow or by TheCloudlessSky
Published on 2011-01-16T18:50:45Z Indexed on 2011/01/16 18:53 UTC
Read the original article Hit count: 164

Filed under:
|

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.

alt text

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.

© Stack Overflow or respective owner

Related posts about html

Related posts about css