Laying out "Label - Value" to center without use of tables

Question

So often you will have a number of labels (lets use name, age, colour) and a value for each!

If I placed these In a 2 column 3 row table I could make sure that the values (lets use Steve, 19, Red) all start in the same horizantal position.

And if I wished by having that column left align, and if i also wanted have the label column right aligned. The two columns then would meet nicely in the center of the table..

How could I go about doing this without the use of tables but also not having to set fixed widths!

Answer 1

I hear what you're saying, but can I remind you that tables are ok for tabular data!

But to do this using pure CSS you could float the label and value left, clear afterwards, and set both elements to display block with 50% width.

Answer 2

I guess you need javascript then to fix that. I don't believe there is a pure CSS solution to this.

Indeed working with fixed widths can be a problem when working in a multilanguage site where label widths can differ, or where the widths can change depending on browser settings like text size...

Answer 3

You're going to have to resolve yourself to using fixed widths for your labels (if going the pure CSS route.) Below is the minimum to get what you're trying to accomplish (pulled from HTML Dog.)

CSS:

label {
    clear: left;
    float: left;
    width: 7em; /* or whatever length suits */
    text-align: right;
}

HTML:

<form>
    <div><label>Item 1</label><input /></div>
    <div><label>Item 2</label><input /></div>
    <div><label>Item 3</label><textarea></textarea></div>
</form>

If you absolute don't want fixed widths, then you can use this javascript (with jQuery) and remove the fixed width from the above CSS. It is worth noting that if you get people with javascript turned off, this will look awful!

var largestWidth = 0;
$('label').each(
    function() {
        if ($(this).width() > largestWidth) {
            largestWidth = $(this).width();
        }
    });

$('label').each(
    function() {
        $(this).width(largestWidth);
    });

I've thrown up a live example on JSFiddle.

Given the use case that you've cited, I actually think tables is the better way to go, but then I have a differing opinion on the table/div form debate than most.

Answer 4

You can arrange this alternatively using UL LI lists.

<fieldset>

<legend>Sign-up Form</legend>
<form name="signup" action="index.html" method="post">
<ul> 
<li> <label for="name">Name</label>
<input type="text" name="name" id="name" size="30" />
</li> 
<li> <label for="email">Email</label>
<input type="text" name="email" id="email" size="30" />
</li>



<li> <label for="psw">Password</label>
<input type="text" name="psw" id="psw" size="30" />
</li>



<li> <label for="free">Free Subscrition</label>
<input type="radio" name="subscription" id="free"/>
</li>

<li><label for="submit"></label>
<button type="submit" id="submit">Send</button> </li> 
<ul>
</form>

</fieldset>

css

fieldset ul, fieldset li{
border:0; margin:0; padding:0; list-style:none;
}
fieldset li{
clear:both;
list-style:none;
padding-bottom:10px;
}

fieldset input{
float:left;
}
fieldset label{
width:140px;  // or you give width in % here
float:left;
}