CSS: как сделать блок, чтобы покрыть всю ширину родительского блока

Question

Я уже сталкивался с одной и той же проблемой уже несколько раз. Когда я отображаю один блок со свойством float, следующий блок начинает перекрывать первый. например,

следующий блок кода

.row_item{
width: 30%;
display: block;
float: left;
padding: 4px;
margin-left: 5px;

}

Так что если в html у меня есть:

 <div class="row_item">
  <a href="/article/nowstar/">
<img  src="/site_media/uploads/fortpost___png_120x120_crop_q85.jpg" alt="wwwwas"/>
  </a>
  <a href="/article/nowstar/" class="article_title"><h4>Paul Merfy</h4></a>
  <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и ...</p>
</div>



<div class="row_item">
  <a href="/article/aliohin/">
<img  src="/site_media/uploads/LR_27b_jpeg_120x120_crop_q85.jpg" alt="wdasd"/>
  </a>
  <a href="/article/aliohin/" class="article_title"><h4>Александр Алехин, первый русский чемпион</h4></a>
  <p>Ten years ago a crack commando unit was sent to prison by a military court for a crime they didn't commit. These men promptly escaped from a maximum security stockade to the Los Angeles underground. ...</p>
</div>



<div class="row_item">
  <a href="/article/anand/">
<img  src="/site_media/uploads/elekit-battletank-mr-9101-2_jpg_120x120_crop_q85.jpg" alt="wwww"/>
  </a>
  <a href="/article/anand/" class="article_title"><h4>Vishi Anand, чемпион с родины шахмат</h4></a>
  <p>Ten years ago a crack commando unit was sent to prison by a military court for a crime they didn't commit. These men promptly escaped from a maximum security stockade to the Los Angeles underground. ...</p>
</div>

топ 100

Это слово top100, начинает отображаться в строке с этими 3 делениями ....

На самом деле, проблема в том, что я не могу понять, как сделать высоту этих блоков управляемой каким-то образом ... Потому что, если я добавлю границы для них (или для элемента, который отображается после), я вижу, что эти границы выше ...

Вот несколько экранов:

http://img.skitch.com/20100121-rxb82873i6aeyuyj1aetdu8uie.png

будет очень рад, если кто-то поможет

Answer 1

Похоже, вам нужно очистить ваши поплавки.

Включите все <div class="row_item"> ... </div> в родительский DIV и примените следующий CSS:

#row_items {
  width:100%;
  overflow:hidden;
}

OR

После последнего <div class="row_item"> ... </div> добавить следующее:

<br style="clear:both" />