title: CSS: How to make a block to cover all width of parent block
body: <p>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.</p>
  
  <p>Following block of code</p>
  
  <pre><code>.row_item{
  width: 30%;
  display: block;
  float: left;
  padding: 4px;
  margin-left: 5px;
  </code></pre>
  
  <p>}</p>
  
  <p>So if in html I have:</p>
  
  <pre><code> &lt;div class="row_item"&gt;
    &lt;a href="/article/nowstar/"&gt;
  &lt;img  src="/site_media/uploads/fortpost___png_120x120_crop_q85.jpg" alt="wwwwas"/&gt;
    &lt;/a&gt;
    &lt;a href="/article/nowstar/" class="article_title"&gt;&lt;h4&gt;Paul Merfy&lt;/h4&gt;&lt;/a&gt;
    &lt;p&gt;Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и ...&lt;/p&gt;
  &lt;/div&gt;
  
  
  
  &lt;div class="row_item"&gt;
    &lt;a href="/article/aliohin/"&gt;
  &lt;img  src="/site_media/uploads/LR_27b_jpeg_120x120_crop_q85.jpg" alt="wdasd"/&gt;
    &lt;/a&gt;
    &lt;a href="/article/aliohin/" class="article_title"&gt;&lt;h4&gt;Александр Алехин, первый русский чемпион&lt;/h4&gt;&lt;/a&gt;
    &lt;p&gt;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. ...&lt;/p&gt;
  &lt;/div&gt;
  
  
  
  &lt;div class="row_item"&gt;
    &lt;a href="/article/anand/"&gt;
  &lt;img  src="/site_media/uploads/elekit-battletank-mr-9101-2_jpg_120x120_crop_q85.jpg" alt="wwww"/&gt;
    &lt;/a&gt;
    &lt;a href="/article/anand/" class="article_title"&gt;&lt;h4&gt;Vishi Anand, чемпион с родины шахмат&lt;/h4&gt;&lt;/a&gt;
    &lt;p&gt;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. ...&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>top 100</p>
  
  <p>This word top100, starts to be displayed in the row with those 3 divs....</p>
  
  <p>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...</p>
  
  <p>Here some screens:</p>
  
  <p><a href="http://img.skitch.com/20100121-rxb82873i6aeyuyj1aetdu8uie.png" rel="nofollow noreferrer">http://img.skitch.com/20100121-rxb82873i6aeyuyj1aetdu8uie.png</a></p>
  
  <p>Will be really happy if someone will help </p>