Floating not right in ie ?

Question

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?

Answer 1

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;
}

Answer 2

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>