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: ```

User Name:

Password:

Accepted Answer

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 :)

CSS and Label Input alignment vs. tables

Solution

Problem