Please have a look at my IE issue pic:

![screenshot](https://i.stack.imgur.com/GNqPz.gif)

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:

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

```

CSS code:

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

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

```