CSS and Label Input alignment vs. tables

Question

This is what I'm trying to accomplish:

First Name: Textbox 
Last Name: Textbox 
... 
more labels with unknown widths: more text boxes

• Using a table it's dead easy to accomplish this
• Using CSS is also dead easy, for as long as you somehow indicate the width of the label(either percentage or hard coded)
• Using jquery to re-calculate the max width and assign it to all labels is also easy

Problem None of the above is elegant.

I want a generic CSS that I can use across all of my websites, where I can display a right aligned group of labels for my inputs and if later the text for one of my label is changed I don't have to redeploy my entire code just to change a darn width value

Something like:

<div class="labelInputArea">
    <label for="userName" class="lable">User Name:</label>
    <input name="userName" type="text" value="" />
</div>
<div class="labelInputArea">
    <label for="password" class="lable">Password:</label>
    <input name="password" type="text" value="" />
</div>
<div class="labelInputArea">
    <label for="longText" class="lable">Some Long Label:</label>
    <input name="longText" type="text" value="" />
</div>

and in my .css I would have something like:

.labelInputArea 
{
    display:block;
}
.labelInputArea .label
{
    text-align:right;
    display:inline;
}

.labelInputArea input
{
    text-align:left;
    display:inline;
}

Answer 1

It sounds like you essentially are after a table layout without using tables.. In which case, just using CSS table-row/table-cell styles could work:

.labelInputArea 
{
    display:table-row;
}
.labelInputArea label
{
    text-align:right;
    display:table-cell;
}

.labelInputArea input
{
    text-align:left;
    display:table-cell;
}

Fiddle here: http://jsfiddle.net/x5c8N/

For what it's worth, I'd probably stick with a fixed width label that will wrap it's contents, eg

.labelInputArea 
{
    display:block;
    padding-top:5px;
}
.labelInputArea label
{
    width:150px;
    display:inline-block;
}

.labelInputArea input
{
    vertical-align:top;
}

http://jsfiddle.net/n4xzF/1/

as I prefer a design that uses vertical space over horizontal space, but that's just my preference :)