Question

I have aligned textboxes with their labels using the line-height method proposed here. I didn’t simply use the width attribute because I wanted it to dynamically adjust if the label text changed. To get Firefox (haven’t tried other browsers) to apply the line height to the column with the inputs, I had to use this hack (note the <div class="hack">):

HTML

    <div class="textbox-column label">
        <div>User Name:</div>
        <div>Password:</div>
    </div>
    <div class="textbox-column input">
        <div><div class="hack">#</div><input type="textbox" name="username" /></div>
        <div><div class="hack">#</div><input type="password" name="password" /></div>
    </div>
    <div class="clear"></div>

CSS

div.clear {
    clear:  both;
}

.textbox-column {
    line-height:1.6em;
}
.textbox-column.label {
    float:  left;
    margin-right:1em;
}
.textbox-column.input {
    float:  right;
}
.textbox-column .hack {
    display: inline;
    width: 1em;
    margin-right: -1em;
}

Can any one suggest a cleaner solution?

Here is a live demo of this code: http://jsfiddle.net/fbe7P/

Answer 1

CSS works best when things are grouped together, so I would group the controls into rows.

Also, the plus side of this method is that it degrades well for small screen sizes.

HTML:

<div class="row">
    <label for="username">Username:</label>
    <input type="text" id="username" />
</div>

<div class="row">
    <label for="password">Password:</label>
    <input type="password" id="password" />
</div>​

CSS:

.row {
    overflow: auto;
}

.row label {
    float: left;
    min-width: 100px;
}

.row input {
    float: right;
}

Demo: http://jsfiddle.net/ezp9H/2/