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

Question

Please have a look at my ieissue pic, http://img230.imageshack.us/i/ieissue.gif/

When I float first div to left and set the second div with margin-left:220px. It is working very well with FF and IE8, yet IE6 and 7 not working at all. My second div collapses and sit right at right bottom of frist div. Here is HTML markup:

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

CSS codes:

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

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

Anyone can help with this? Very appreciated for your answer!

Answer 1

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

Answer 2

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">