5

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

3
  • The comment below has a point. Thsi is tabular data, why not use tables? Oct 23, 2008 at 19:11
  • While it's true it can be viewed as tabular data, the visual display (2 sets of key=>value pairs) makes it awkward in terms of accessibility if it were a table. You can also view it as a list of keys and values that happens to be displayed in 2 columns... so using CSS to position is also a solution.
    – Rahul
    Oct 23, 2008 at 19:31
  • (Of course, you could make two tables and float them next to each other. That would work too.)
    – Rahul
    Oct 23, 2008 at 19:32

9 Answers 9

13

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

2
  • In this case, putting the text in the table is even beneficial, because it is the title of the table, therefore is the "header" of the table. The other categories are too, but it putting it in adds semantic value.
    – cdeszaq
    Oct 23, 2008 at 19:14
  • This isn't tabular data. That's not to say that a table is necessarily inappropriate, but this is a set of label/value pairs, not a table with rows and columns. Oct 23, 2008 at 21:32
9

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>
2
  • Tables don't always need column headings as sometimes you can use row headings instead - you just need to remember to set the scope="row|column" attribute.
    – Ian Oxley
    Oct 24, 2008 at 12:32
  • Thanks, that proves how wrong it would be to use a table. As "Cost" in the example, is neither a heading for the row or the column. Just half the row! How is that going to make sense to a screen reader? Oct 24, 2008 at 20:02
3

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

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

2
  • Additionally, if you want 2 columns, use 2 definition lists, and float them. Oct 23, 2008 at 19:26
  • Thanks for the nod! thumbs up I like this answer best. Oct 23, 2008 at 19:40
2

@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.

3
  • Why fake a definition list when one exists? Oct 23, 2008 at 19:25
  • good question. Definition lists would be more appropriate here. I will update to make note of that.
    – pkaeding
    Oct 23, 2008 at 19:29
  • As I've noted in a similar question, I just don't agree that this is semantically a definition list. It's a set of label/value pairs, for which there is not a standard HTML element. Neither definition lists, divs, nor tables are intrinsically more appropriate to this context. Oct 23, 2008 at 19:50
2

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.

1
  • Using @pkaeding's approach, you don't need to split this up arbitrarily into two dls. Just float the .pair element left and give it width 50% and you'll get the two-column effect for free. Oct 23, 2008 at 19:52
0

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

0

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.

0

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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.