How do you get the numbers of an ordered list to show on the left in IE?

I have a rows of data in div tags that float left and have widths set. They are inside li tags. Everything works fine in chrome and FF, but in IE8 the numbers show up in the middle of my rows, right next to the last div tag that doesn't have a float left.

The lists are created dynamically so I'll try to recreate an example.

<ol id='list'>
    <li>
        <div id='d1'>data</div>
        <div id='d2'>data2</div>
    </li>
</ol>

The css would look something like

#d1{
    float:left;  
    width:50px;
}
#d2{
    width:40px;
}

This is my first question on here ho开发者_开发知识库pefully it is clear enough.

All of the divs that belong on a particular row should be left floated and the container should be either an inline block or regular block.

for example:

<style>
  .column { float:left; }
  #d1 { width: 50px; }
  #d2 { width: 40px; }
  li {display: inline-block;}
  br { clear: both; }
</style>
<li>
  <div class="column" id="d1">data</div>
  <div class="column" id="d2">data2</div>
</li>
<br>
<li>
  <div class="column" id="d1">data</div>
  <div class="column" id="d2">data2</div>
</li>

Most likely you have either an invalid doc type or have selected one that causes quirks mode which is why it works in some of the browsers.