How to align all fields as label width grows

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 w开发者_开发知识库ith 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.

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 ;) .

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/

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/

Either use tables, or some kind of CSS grid-layout framework like blueprint. http://www.blueprintcss.org/

Width align left and right columns and vertical align top

<fieldset>
    <label>Name</label><input type="text" /><br />
    <label>Username (aka aka aka aka aka aka aka aka aka aka aka)</label><input type="text" /><br />
    <label>Password</label><input type="text" /><br />
    <label>Confirm Password</label><input type="text" /><br />
</fieldset>

<br />
<label>Another label</label>

CSS:

fieldset label {
  display: inline-block;
  vertical-align: top;
  width: 150px;
  text-align: right;
  font: 11px Verdana;
  color: #003399;
  margin: 4px 4px 4px 4px;
}

fieldset input {
  display: inline-block;
  vertical-align: top;
  margin: 4px 4px 4px 4px;
}

fiddle: https://jsfiddle.net/46okafre/