float:left and margin-left issue in ie6 and 7

Please have a look at my IE issue pic:

When I float the first <div> to the left and set the second <div> with margin-left: 220px, it works very well with FF and IE8. Yet in IE6 and 7 it doesn't work at all. My second <div> collapses and sits at the rightmost bottom of the first <div>. Here is HTML markup:

<ol id="listingList">
    <li>
        <div class="media">
            .......
        </div>
        <div class="listingInfo">
            .......
        </div>
    </li>
</ol>

CSS code:

#listingList div.media {
    width: 200px;
    float: left;
    padding-right: 10px;
}

#listingList div.listingI开发者_运维技巧nfo {
    margin-left: 220px;
    width: 540px;
    color: #6A6A6C;
}

listingList div.listingInfo {
float:left;
margin-left: 20px;
width:540px;
color:#6A6A6C;
}

You can get this to work with a minor amendment:

#listingList div.media {
    background-color: blue;
    width:200px;
    float:left;
    padding-right:10px;
    position: absolute;
}

#listingList div.listingInfo {
    background-color: aqua;
    margin-left: 220px;
    width:540px;
    color:#6A6A6C;
    position: absolute;
}

Although you'll also have to correct the typo:

<did class="listingInfo">

should be

<div class="listingInfo">