title: two column css setup floating over container div
body: <p>I have a very simple two column  setup shows below.</p>
  
  <p>However in example one where I have the two column setup the #left and #right divs will float above the #posts container.</p>
  
  <p>Example 2 does not float like this but is not the two column setup I am looking for. Suggestions?</p>
  
  <pre><code>div#posts 
  {
     width: 700px;  
     margin: 0 auto;  
     margin-top: 5px;
     margin-bottom: 0px;  
     padding: 5px;  
     border: 1px solid #CCC;  
     background-color: #EEE;  
  } 
  
  div#left {
     float:left;
     width:100px;
     background:#EEE;
  }
  
  div#right {
     float:right;
     width:500px;
     background:#EEE;
  }
  
  
  &lt;!-- example 1 
  
  &lt;div id="posts"&gt;
      &lt;div id="left"&gt;post&lt;/div&gt;
      &lt;div id="right"&gt;post&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- example 2
  
  &lt;div id="posts"&gt;
      &lt;div&gt;post&lt;/div&gt;
      &lt;div&gt;post&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>