title: CSS div's overlapping
body: <p>I am trying to build a comments section for my website. In the comments section, I want it laid out WordPress-style, with the avatar to the left. It works, but what is happening is the comment text is wrapping around the avatar underneath. For an example, <a href="http://i40.tinypic.com/2m6jpd3.png" rel="nofollow noreferrer">here</a>. This probably has a simple solution to it but I am a CSS amatuer. This is the relevant XHTML and CSS:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*------- COMMENTS -------*/
  
  #comments {
    width: 91px;
    height: 18px;
    background: url(images/comments.png) no-repeat;
    text-indent: -9000px;
    margin-bottom: 10px;
  }
  
  div.comment {
    padding: 5px 5px 30px 5px;
    background: url(images/commentbar.png) bottom center no-repeat;
    margin-bottom: 10px;
  }
  
  div.comment div.left {
    margin-left: 10px;
    float: left;
    width: 51px;
  }
  
  div.comment div.right {
    width: 482px;
  }
  
  div.comment div.right h3 {
    color: #e6267c;
    font-size: 18px;
    display: inline;
    text-transform: uppercase;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="comment"&gt;
    &lt;div class="left"&gt;
      &lt;img src="images/noavatar.png" alt="No Avatar" /&gt;
    &lt;/div&gt;
  
    &lt;div class="right"&gt;
      &lt;h3&gt;Laura Brauman&lt;/h3&gt;
      &lt;span&gt;12 March 09&lt;/span&gt;
      &lt;p&gt;Nunc ultrices nisi ut tellus. In placerat tempus quam. Nulla dolor nulla,dictum eget, auctor a, rutrum sit amet, ante. Sed scelerisque est. Vestibulum arcu purus, dignissim nec, rhoncus id, sodales eu, quam. Nullam congue hendrerit enim. Phasellus
        risus. Pellentesque lacus sem, luctus tempus.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>