CSS float issue in IE6/7

I've got a weird CSS float problem in IE6 and IE7.

My HTML is:

<fieldset style="float:left">
    <legend>Summary</legend>
    <div class="display-label">Recruitment type</div>
    <div class="display-field">Permanent Labour</div>
    <div class="display-label"># resources&l开发者_StackOverflow社区t;/div>
    <div class="display-field">2</div>
    <div class="display-label">Request Created</div>
    <div class="display-field">4/28/2011</div>
    <div class="display-label">Requested by</div>
    <div class="display-field">1066594</div>
    <div class="display-label">Status</div>
    <div class="display-field">Active</div>
</fieldset>

and my CSS is:

.display-label, .display-field
{
    padding: 0.35em 0.25em;
    float: left;
}

.display-label
{
    width: 13em;
    text-align: right;
    clear : left;
    font-weight: bold;
}

.display-field
{
    margin-left: 1em;
}

IE 8+ and Firefox display this correctly like this:

IE6 and 7 , though, display the following:

How can I fix this?

---

you do need to contain the floats, i.e. use some form of clearance, but you don't need to float everything

first remove the inline style, unfloat the fieldset

<fieldset style="float:left">

if you want fieldset to "shrink-wrap" (floating an element without a width should do this) you'd be best to set a width or max-width on it, IE hasn't quite got the shrink-wrap behaviour right the element to be "shrunk" contains elements with hasLayout which this 'fieldset` does because of the floated div(s) inside

then this CSS should work without hacking the HTML

.display-label, 
.display-field {
    padding: 0.35em 0.25em;
}

.display-label {
    float: left; 
    clear: left; 
    width: 13em; 
    text-align: right; 
    background: #eee; 
    font-weight: bold;
}

.display-field {
    overflow: hidden;
}

---

EDIT: You need to specify a a clear after the label and the field are created. You should technically be wrapping both the label and field with a container element to prevent misalignment, but this should accomplish what you're looking for.

<fieldset style="float:left">
    <legend>Summary</legend>
    <div class="display-label">Recruitment type</div>
    <div class="display-field">Permanent Labour</div>

    <div style="clear:both;"></div>

    <div class="display-label"># resources</div>
    <div class="display-field">2</div>

    <div style="clear:both;"></div>

    <div class="display-label">Request Created</div>
    <div class="display-field">4/28/2011</div>

    <div style="clear:both;"></div>

    ...

</fieldset>