Styling DT to float left of DD

Question

I'm trying to style a definition list such that each dt floats to the left of its corresponding dd elements. I have used:

dt {
    clear: both;
    float: left;
    width: 6em;
}
dd {
    margin-left: 6.5em;
}

which works as far as it goes. It nicely handles multiple dd elements per dt and dd text that is long enough to span multiple lines.

However, I'd really like to be able to cope with multiple dt elements per dd (which is valid HTML) and dt elements that are taller than the corresponding dd elements (due to length of text causing the lines to wrap). At this point the styling falls apart and subsequent dd elements get out of line with their dt.

I have tried various things such as floating the dd as well, which breaks alignment of multiple dd elements. Adding dd + dd { clear: both; } which almost works but now long dd text sits under its dt (not to mention older browsers not respecting the rule).

Has anyone managed to do this? I really don't want to give up and use a table but maybe it's appropriate.

My test markup is here: http://pastebin.com/nmAQ5Xdm

Answer 1

I have figured out a way to do this when you don't mind constraining the width of the dl element:

dl {
    max-width: 30em;
    overflow: hidden;
}
dt, dd {
    margin-top: 0.5em;
}
dt {
    clear: both;
    float: left;
    width: 6em;
}
dd {
    float: right;
    margin-left: 0.5em;
    width: 22.5em;
}

It's not perfect as the styling breaks if the viewport is too narrow for the dl.