Making a <dl> clear before ever <dd> in IE 7?

Question

I'm trying make a <dl> to define the icons I am using on the page. I want it so that every icon is inside a <dt> and it's definition is inside the following <dl>. After every icon definition, I want a line break. Simple, right? Well, IE7 says no!

Here is my HTML:

        <dl style="display: block;" id="surveysIcons" class="icons">
            <dt class="clearfix"><span class="icon"><img alt="Complete" title="" src="images/fiq_complete.png"></span></dt>
            <dd>You have completed the survey</dd>

            <dt class="clearfix"><span class="icon"><img alt="Incomplete" title="" src="images/fiq_incomplete.png"></span></dt>
            <dd>You have missed the survey</dd>
        </dl>

Here is my CSS:

dl.icons {
    margin: 0 0 1em 0;
    padding: 0;
    width:100%;
    overflow:hidden;
    line-height:24px;
    clear: both;
} 
dl.icons dt {
    clear:left;
    margin:0;
    float:left;
    min-height:24px;
}
dl.icons dd {
    padding: 3px;
    margin: 0 0 0 5px;
    float:left;
    min-height:24px;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}  /* for IE/Mac */

My method here is floating both the <dt> and <dd> left, and clearing at every <dt>, which, unfortunately, does not work in IE 7.

I have tried the so-called magical clearfix, but to no avail. This works in Firefox and IE 8.

Any other ideas that could possibly make this work (preferably without changing too much HTML)? Thanks!

Answer 1

remove float:left from dl.icons dd