CSS Positioning Question - Tables vs. Absolute vs. DL [closed]

Question

I'd like to align label/value pairs in the center using CSS without using absolute positioning or tables (see screen shot). In that screen shot I positioned the value (ie. $4,500/wk) absolute and then floated the label right up against it. But absolute doesn't work so well in IE and I've heard it's not a good technique.

But how can I acheive this effect where the labels are all justified right without absolute?

alt text http://www.amherstparents.org/files/shot.jpg

Answer 1

If you're showing tabular data there's no shame in using a table.

Answer 2

I'm confused, what's tabular about that data? Where are the records? Rows of different fields do not really make a table in the traditional sense. (Nor hacking it to have two records per row for that matter)

If we're entertaining this idea, then what's the difference between the left half of the table and the right? What would the column headings be if there were any?

I prefer the definition list suggestion, it's definitely a better fit than a table. And you wouldn't need two columns if all the DTs and DDs were float:left and width:25%, and in the following order: Cost, Pets, Sleeps, Smoking, etc... Therefore you can use 1 definition list, as it really ought to be.

Although you will probably need a clear:left on every other DT just in case the content of any of these elements wraps over two lines.

<style>
    dl
    {
        float:left;
        width:100%;
    }
    dt,
    dd
    {
        float:left;
        width:24%;
        margin:0;
        padding:0;
    }
    dt
    {
        text-align:right;
        padding-right:.33em;
    }
    dd
    {
        text-align:left;
    }
</style>
<dl>
    <dt>Cost:</dt>
    <dd>$4,500/wk</dd>
    <dt>Pets:</dt>
    <dd>No</dd>
    <dt>Sleeps:</dt>
    <dd>1</dd>
    <dt>Smoking:</dt>
    <dd>No</dd>
</dl>