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

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

Вот некоторые экраны:

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

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

Answer 1

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

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

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

ИЛИ

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

<br style="clear:both" />