Q:

Using column divs with the line-height attribute to align textboxes with their labels

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/

A:

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/

