Question

I’ve come across the same issue several times already. When I display one block with the float property, the next block starts to overlape the first one. e.g.

Following block of code

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

}

So if in html I have:

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

top 100

This word top100, starts to be displayed in the row with those 3 divs….

Actually, the problem is that, I can’t understand, how to make height of these blocks controllable in some way… Because if I add borders for them, (or for element which displayed after), I see that these borders are higher…

Here some screens:

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

Will be really happy if someone will help

Answer 1

Looks like you need to clear your floats.

Enclose all <div class="row_item"> ... </div> in a parent DIV and give apply following CSS:

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

OR

After the last <div class="row_item"> ... </div> add the following:

<br style="clear:both" />