Style a definitition list as simple key value set

Question

I'd like to use a definition list as simple as:

<dl>
  <dt>name:</dt>
  <dd>Tomas</dd>

  <dt>address:</dt>
  <dd>this is a very long wrapping address</dd>

  <dt>age:<dt>
  <dd>29</dd>
<dl>

to render something like:

name: Tomas
address: this is a very long
wrapping address
age: 29

The definition list seems semantically the best option here.

Using the new run-in display style will do the trick:

<style> dt { display: run-in; } </style>

But this isn't widely supported yet. How can I style my definition list for better cross-browser support (ie6 not necessary), without changing the html (currently I use display inline and add ugly br's) ?

Edit to clarify :

dt { clear: left; }
dd { float: left; }

won't work because it would render as:

name: Tomas
address: this is a very long
         wrapping address
age: 29

The design specifies that these multi-line field should wrap to the start of line to preserve space.

Answer 1

I think this would work:

dt {
  float: left;
  clear: left;
  margin: 0;
  padding: 0 .5em 0 0;
}
dd {
  margin: 0;
  padding: 0;
}

Another option that is useful is the :after pseudo-class. You could skip the colon on each of the dt elements and have:

dt:after {
  content: ":";
}

This makes it more flexible and you can change that character across the list and website as a whole, or get rid of it if you felt like it.

To solve the wrapping problem you mentioned, you'll need to set widths on both the dt and dd elements. Or, use a table, with th for name/address etc and td for the "data". IMO a table is a semantically acceptable solution here - it is tabular data.