title: force a div to contain floated child divs
body: <p>I'm trying to customize the twentyeleven theme in Wordpress.
  It has a 2-columns layout set up by:</p>
  
  <pre><code>&lt;div id="main"&gt;
       &lt;div id="primary"&gt;&lt;/div&gt;
       &lt;div id="secondary"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre class="lang-css prettyprint-override"><code>#main {
      clear: both;
      padding: 1.625em 0 0;
  }
  #primary {
      float: left;
      margin: 0;
      width: 100%;
  }
  #secondary {
      float: right;
      margin-right: 7.6%;
      width: 18.8%;
  }
  </code></pre>
  
  <p>I am not sure that there are other relevant css properties inside <code>style.css</code> which I have not recognized. Anyway, the child divs lie outside <code>#main</code>. How can I force to have the child divs contained in <code>#main</code>? (apart from reducing the width of <code>#primary</code>, which yields no effect to me)  </p>