Блог

У меня есть страница с 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;
 }
 

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

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

 #content{overflow:hidden;}
 

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

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

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