Поплавки влияют друг на друга?

Question

У меня есть страница с 3 колонками, одна с плавающей слева, одна справа и одна в центре.В центральном блоке мне нужно использовать несколько блоков с изображением, плавающим влево, чтобы текст располагался слева.Это делает для странной ошибки отображения, где каждый блок немного отступ.Понятно: оба исправляют ошибку, но также разбивают блоки из рамки страницы.Упрощенная версия HTML-кода страницы может быть найдена ниже:

<div id="leftbar">Navigation</div>
<div id="rightbar">Right bar</div>
<div id="content">
    <div class='content-block'>
         <span class='image-floated'><img src='image'/></span>
         <span>Some content</span>
         <div class='someother_content'>content</div>
         <div class='content_bottom'>stuff</div>
    </div>
    <div class='content-block'>
       <span class='image-floated'><img src='image'/></span>
       <span>Some content</span>
       <div class='someother_content'>content</div>
       <div class='content_bottom'>stuff</div>
   </div>
</div>

, а CSS выглядит следующим образом:

 #leftbar
 {
    float: left;
    width:  10%;
 }

 #rightbar
 {
    float: right;
    width: 20%;
 }

 .image-floated
 {
    float: left;
    width: 55px;
 }

 .content-block
 {
     padding-top: 3px;
 }

Как я могу это исправить, пожалуйста?Заранее спасибо

Answer 1

просто напишите overflow:hidden; в вашем #content вот так:

#content{overflow:hidden;}

Проверьте скрипку http://jsfiddle.net/RcEBf/

Answer 2

Если вы укажете левой колонке соответствующую высоту, изображение не будет всплывать из центра div.

#leftbar
{
float: left;
width:  10%;
height: 500px;
}