Definition list boilerplate

Cross-browser 2 column layout of a definition list (or any other 2 column layout where you can't/don't want to wrap each row in a containing element)

by wheresrhys

HTML

<!--[if IE 6]>     <div class="ie6"> <![endif]-->  
<!--[if IE 7]>     <div class="ie7"> <![endif]-->  
<!--[if IE 8]>     <div class="ie8"> <![endif]-->  
<!--[if !IE]><!--> <div>             <!--<![endif]-->  
<dl>
    <dt>term</dt><dd>definition</dd>
    <dt>term<br>term</dt><dd>definition</dd>
    <dt>term</dt><dd>definition<br>definition</dd>
</dl>

</div>

CSS

dt,
dd {
    float: left;
    padding-bottom: 5px;
}
            
dt {
    clear: left;
    padding-right: 10px;
    width: 100px;
    background: red;
}

.ie7 dt,
.ie6 dt{
   padding-right: 0;
}

dd {
    width: 80px;
    background: blue;
}

.ie7 dd,
.ie6 dd{
    margin-left:110px;
    float:none;
}