title: css - clear floats doesn't work
body: <p>I have a clear floats problem I can't figure out. This is the HTML code:  </p>
  
  <pre><code> &lt;div id="main"&gt;
     &lt;div id="primary"&gt;
        &lt;div id="content" role="main"&gt;
        &lt;/div&gt;&lt;!-- #content --&gt;
     &lt;/div&gt;&lt;!-- #primary --&gt;
     &lt;div id="secondary"&gt;
     &lt;div&gt;&lt;!-- #secondary --&gt;
   &lt;/div&gt;&lt;!-- #main --&gt;
  </code></pre>
  
  <p>This is the CSS for each element: </p>
  
  <pre><code>#main {
  clear: both;
  }
  
  #primary {
  float: left;
  width: 100%;
  margin: 0 -40% 0 0!important;
  }
  
  #content {
  background: none repeat scroll 0 0 white;
  box-shadow: 0px 10px 10px 2px #888;
  float: left;
  margin: 0 12.3%!important;
  position: relative;
  width: auto;
   }
  
  #secondary {
  float: right;
  margin-right: 15%;
  width: 22%;
  position: relative;
  padding-top: 170px;
  }
  </code></pre>
  
  <p>The website is build on wordpress so <code>main</code> starts in header.php and ends in footer.php. The <code>primary</code> and <code>content</code> divs start and end in each page template and the <code>secondary</code> div is called in each page template (get sidebar) after the <code>primary</code> div ends. </p>
  
  <p>The problem is that the content div stops right after the primary div ends, while the secondary div goes on extending below. The content div should extend until the end of the document where the secondary or main div ends. </p>
  
  <p>You can view the code live and the problem it's causing on this <a href="http://nelsonandco.pro/learncenter/about/" rel="nofollow">website</a>.</p>