title: CSS: Div boxes overlap each other and hide text. How to "clear" them?
body: <p>I have a small issue with my div boxes that I can’t seem to resolve.</p>
  
  <p>I’m dynamically creating these div boxes:</p>
  
  <pre><code>&lt;div id="pagelist"&gt;
  &lt;div class="pagelist_img"&gt;&lt;img src="images/default.gif"&gt;&lt;/div&gt;
  &lt;div class="pagelist_h1"&gt;HEADLINE&lt;/a&gt;&lt;/div&gt;
  div class="pagelist_excerpt"&gt;SUMMARY&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Each div box consists as shown of an image on the top, then the headline and a short summary of the post. Now, my problem is that the boxes overlap each other but just enough so the summary part is hidden beneath the image of the div box below it.</p>
  
  <p>Okay, it might be a bit confusing but the point of the line is, that somehow the boxes isn’t separated but are overlapping each other.</p>
  
  <p>My CSS for the pagelist div box is:</p>
  
  <pre><code>#pagelist{
      float: left;
      width: 280px;
      margin: 0 40px 20px 0;
      position: relative;
      height: 100px;
  
  }
  
  .pagelist_h1 {
      font-size: 1.8em;
      font-weight: bold;
  }
  
  .pagelist_img{
      clear:both;
      top: 0px;
      position: relative;
  }
  
  .pagelist_excerpt, .pagelist_excerpt p {
      font-size: 1em;
      color: #000000;
      clear:both;
  }
  </code></pre>
  
  <p>I hope some have a solution or can point me in the right direction because I've tried for some time now to solve it myself, without any luck. I though it was just a matter of using the <strong>clear:both</strong> tag, but it didn't do anything.</p>
  
  <p>Sincere<br>
  - Mestika</p>