Floating not right in ie ?

Hi, i want to do like the following format:

So this is what i did :

<style>
.toptitle{
 font-size:14px;
}
.toprating{
background:yellow;
float:left;
font-size:12px;
}
.topcontainer{
border-bottom:1px #CCCCCC solid;
}
</style>

<div class="topcontainer">
<div class="toprating">256</div>
<div class="toptitle">Lorem Ipsum...</div>
</div>
<br>
<div class="topcontainer">
<div class="toprating">256</div>
<div class="toptitle">Lorem Ipsum...</div>
</div>

Now, in firefox,chrome,safari, this works perfectly, but in IE the title goes about 30 px down.

Is there a mistake in the code, or is there any better code to do this?

From stackoverflow

• In IE you'll need to float the title as well like this:

  .toptitle{
    font-size:14px;
    float: left;
  }
  

  Alternatively, if the rating is a constant width, just give it space like this:

  .toptitle{
    font-size:14px;
    margin-left: 40px;
  }
  .toprating{
    background:yellow;
    float:left;
    font-size:12px;
    width: 40px;
  }
  

  David : Thanks, but it's the same :(

  Nick Craver : @Tom - I'm not seeing that here in IE7/8, which version of IE, and what other CSS do you have?

  David : IE8 & thanks ;) fixed by doing like this !!

  256

  Lorem Ipsum...

• You need to float topTitle and clear.

  <style>
  .toptitle{
    font-size:14px;
    float: left;
  }
  .toprating{
    background:yellow;
    float:left;
    font-size:12px;
  }
  .topcontainer{
    border-bottom:1px #CCCCCC solid;
  }
  .clear {
    clear: both;
  } 
  </style>
  
  <div class="topcontainer">
    <div class="toprating">256</div>
    <div class="toptitle">Lorem Ipsum...</div>
    <div class="clear"/>
  </div>
  <br>
  <div class="topcontainer">
    <div class="toprating">256</div>
    <div class="toptitle">Lorem Ipsum...</div>
    <div class="clear"/>
  </div>
  

  David : Thanks, but it's the same :(