Плавающий не правильно в то есть?

Question

Я хочу сделать, как в следующем формате:

Так вот что я сделал:

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

Теперь в Firefox, Chrome, Safari это работает отлично, но в IE заголовок уменьшается примерно на 30 пикселей.

Есть ли ошибка в коде или есть лучший код для этого?

Answer 1

Вам нужно всплыть topTitle и очистить.

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

Answer 2

В IE вам нужно добавить плавающий заголовок так:

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

В качестве альтернативы, если рейтинг имеет постоянную ширину, просто оставьте для него место следующим образом:

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