CSS Positioning Question - Tables vs. Absolute vs. DL

Answer 1

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

Answer 2

Use fixed width divs with the CSS text-align property. Don't forget to float your divs left.

Answer 3

Let's say you're using DL, DT and DD:

<dl>
<dt>Cost:</dt>
<dd>$4,500/wk</dd>
<dt>Sleeps:</dt>
<dd>1</dd>
</dl>

You can use the following approximate CSS (untested):

dl { width: 200px; }
dt { width: 100px; text-align: right; float: left; clear: both; }
dd { width: 100px; margin: 0; float: left; }

Edit: As Chris Marasti-Georg pointed out:

Additionally, if you want 2 columns, use 2 definition lists, and float them

Answer 4

@jon is right, if its tabular data, you can use a table. However, if you really don't want to use a table, I think this is what you want:

CSS

.label {
  min-width: 20%;
  text-align: right;
  float: left;
}

HTML

<div class="pair">
  <div class="label">Cost</div>
  <div class="value">$4,500/wk</div>
</div>
<div class="pair">
  <div class="label">Sleeps</div>
  <div class="value">1</div>
</div>
<div class="pair">
  <div class="label">Bedrooms</div>
  <div class="value">9</div>
</div>

EDIT @Chris Marasti-Georg points out that definition lists would be more appropriate here. I agree, but I guess I wanted to show that the same can be easily done with any block-level element, and there is nothing in the default styling of definition lists that is needed to accomplish this goal.

Answer 5

How about using a table to layout the table and then using CSS to position that table wherever you want on your page?

Answer 6

Expanding on Rahul's post:

CSS

#list { width: 450px; }
#left { float: left; background: lightgreen; }
#right { float: right; background: lightblue; }
dl { width: 225px; }
dt { width: 100px; text-align: right; float: left; clear: both; }
dd { width: 100px; margin: 0; float: left; padding-left: 5px; }

HTML

<div id="list">
    <dl id="left">
     <dt>Cost:</dt>
     <dd>$4,500/wk</dd>
     <dt>Sleeps:</dt>
     <dd>1</dd>
     <dt>Bedrooms:</dt>
     <dd>9</dd>
     <dt>Baths:</dt>
     <dd>6</dd>
    </dl>
    <dl id="right">
     <dt>Pets:</dt>
     <dd>No</dd>
     <dt>Smoking:</dt>
     <dd>No</dd>
     <dt>Pool:</dt>
     <dd>No</dd>
     <dt>Waterfront:</dt>
     <dd>No</dd>
    </dl>
</div>

I tested this under FF 3.0.1, IE6 and IE7. The background color is simply there to help you visualize where the columns start and end.

Answer 7

A quick note on implementing this using tables, there are several constructs that will make this plenty accessible. The simplest of which would simple to be to use TH for the labels and TD for the values. This site has a nice discussion, and goes deeper into things like headers for cells, etc.

Answer 8

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>

Answer 9

I've always treated definition lists as to be used for definitions of items, not for key/value pairs. (9 is not a definition of 'bedrooms'). However, this particular construct (lists of key/value pairs) has been causing arguments for years as there is no native semantic markup which reflects it properly.

Go for a DL if you're not anal about what a definition is. Or go for a table. A table with key/value pairs in rows, if the header/cell scope is set correctly, is perfectly valid. I've been doing this recently, and it does seem to be the most semantically accurate representation.