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

StackOverflow https://stackoverflow.com/questions/231023

  •  04-07-2019
  •  | 
  •  

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

Was it helpful?

Solution

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>

OTHER TIPS

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

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

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

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

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.

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

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.

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top