title: Paragraph flowing outside of div
body: <p>I'm trying to make a footer as said here: <a href="http://css-tricks.com/left-align-and-right-align-text-on-the-same-line/" rel="nofollow">http://css-tricks.com/left-align-and-right-align-text-on-the-same-line/</a></p>
  
  <p>The problem is the 2 paragraphs are placed a bit under the footer, as if they where not defined in the div. Here is my code:</p>
  
  <pre><code>&lt;div id="footer" style="clear: both;"&gt;
    &lt;p class="alignleft"&gt;left&lt;/p&gt;
    &lt;p class="alignright"&gt;right&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>div#footer{
      height: 20px;
      padding: 0px 10px;
      line-height: 20px;
      clear: both;
  }
  .alignleft {
      float: left;
  }
  .alignright {
      float: right;
  }
  </code></pre>