Classic Label:Value layout?

fixed with labels a pain in css

[CgiBin]

I started out trying to use spans, but you can't assign a width to a span.

<style>
div#mainDiv {
position: absolute;
width: 600px;
left: 50%;
margin-left: -300px;
padding: 2px;
}

.label {
font-weight: bold;
width: 100px;
}

.value {
}
</style>

<div id="mainDiv">
<span class="label">
label
</span>
<span class="value">
value
</span>
<div>

so I tried absolutely positioning the 2nd span:

<style>
.value {
position: absolute;
left: 100px;
}
</style>

Which sorta worked until my label or value got too large to fit in the mainDiv.

To make a long story short, I've tried changing the spans to floated divs (including a clearing div), which doesn't work if the value gets large enough to wrap.

Should I just use a table? The more I think about it, this type of layout actually is what tables are supposed to be for right? In my zeal to convert out old table layouts to divs, have I gone too far?

[benihana]

it sounds like tabular data, in which case it would be bad practice not to use a table.

[Moby_Dim]

span is an inline element.

[Robin_reala]

If it's tabular data then yes, go for a table. You can make the table even better for semantics by adding <th>, <thead>/<tbody>, @summary etc :)

If you're using labels and values here in the sense of form controls then it'd be better to stick to CSS layout.