How to align all fields as label width grows

Question

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.

Answer 1

You're trying to create tables... without tables? Seems to me this is a situation where using tables is a perfectly fine solution. And I don't see what the 'tag-hell' should be. A tables needs a few more tags, sure, but so what? You could wrap everything in divs and simulate table cells with floats, but then you'll have a css-hell ;) .

Answer 2

I think this is what you're looking for:

label
{
    width: 150px;
    display: inline-block;
}
input[type=text]
{
    display: inline-block;
}

http://jsfiddle.net/rQ99r/5/

Answer 3

What about this solution?

<fieldset id="fs1">
    <div class="column">
        <label>Name</label>
        <label>Username text text text </label>
    </div>
    <div class="column">
        <input type="text" />
        <br />
        <input type="text" />
    </div>
</fieldset>

css:

label
{
  display: block;
}
.column{
    float:left;
}

fiddle: http://jsfiddle.net/steweb/xzHe6/