Floated+cleared element not affecting following floated elements in IE7 - is there a workaround?

Question

I'm trying to style a definition list so that dt tags start new rows, and can be followed by any number of dd elements on the same row. In modern browsers this is as simple as

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

In IE7, however, if the clearing element has float, subsequent floats are not affected. (example) Is there any workaround for this bug? I've been looking around, but none of the solutions usually suggested seem applicable:

• since this is a definition list, I can't wrap elements on the same rows in a div.
• I don't want to use an invisible non-floated clearing element - it would have to be a dt or dd, and the whole point of using a definition listr instead of a table or span-br soup is to have semantic markup, which would be messed up by purely presentational dt/dd elements.
• as far as I can see, approaches based on triggering hasLayout (thus triggering inline-block behavior) such as this don't work when the number of elements per row is not fixed. (Also, I would prefer not to bother with stripping whitespace.)
• I couldn't get this solution to work with dl instead of ul; even setting display:list-item didn't help.

Is there any other way to force IE7 to mimic standard float behavior?

Answer 1

Try using inline-block instead of floats.

dl { 
    line-height:1.2em; 
    padding-left:1em; 
} 
dt { 
    display:block; 
    margin:0 0 -1.2em -1em; 
} 

dd { 
    display:inline-block; 
    display:inline !ie; 
    margin-left:1em; 
} 

Credit to deathshadow who came up with this.