Align Input elements and labels into two seperate columns

Question

Now this can be done easily with tables, however, i want to know if there is sensible non table way to do this.

What i want is lets say labels on one side, left side top to bottom of greatly varying length. And input elements often multiple per line on other side however all input elements align at the same left edge which is about 100px away from all their labels and is not based on the length of the label.

I could use tables or css tables...however is there another way. Because It seems not very good idea especially to update and maintain a structure that is related but divided into separate entities.

I want to so that if it's possible to do this layout if possible without using tables/css tables...but if that is unpractical let me know.

Answer 1

Easy peasy!

1. Wrap both your label and field with a <label> tag.
2. Wrap the label text with a <span>.
3. Style the <label> with display: block.
4. Style the <span> with display: inline-block with a width.

---

HTML

<form>
    <label>
        <span>Name</span>
        <input type="text" />
    </label>
    <label>
        <span>Email</span>
        <input type="email" />
    </label>
    <label>
        <span>Password</span>
        <input type="password" />
    </label>
</form>

CSS

label
{
    display: block;
}

label span
{
    display: inline-block;
    text-align: right;
    width: 100px;
}

---

Example Fiddle: http://jsfiddle.net/3aJyd/2/