Question

For explanation imagine a simple address. Written in a HTML paragraph with line breaks it would like this:

Street: Example Street 1 City: Vienna Zip Code: 1010 Country: Austria 

Most of the time that’s completely okay, but sometimes I have to achieve the following output:

Street:   Example Street 1 City:     Vienna Zip Code: 1010 Country:  Austria 

My thoughts so far:

1. Should be valid XHTML and work or degrade gracefully in all major browsers
2. Using tags in a semantically correct way is strongly preferred
3. Because of point two: I hope there’s a better solution than tables
4. The problem is not limited to addresses – would be useful in other situation too

How do you achieve this output (using HTML and/or CSS)?

Answer 1

I find that definition lists make much more sense than tables here. Float the dt to the left with a specific width and have it clear on the left. If either the label or the data are going to wrap, you’ll have to do some post-element-float-clearing trickery to make this work, but it doesn’t sound like you’ll need that. (I think it’s worth it, anyway; plus, do it once and you’ll never have to do it again.)

You can even use :after to add the colons automatically, if you don’t mind brushing off IE6.