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-widt

Answer 1

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

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/

Answer 4

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 5

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/