title: Container Div non expanding to inner div content
body: <p>I have been looking all night, and I have to be doing something incorrectly, as I have seen this question or similar has been posted before. My apologies for needing to ask it again.</p>
  
  <p>I have a a container div that holds some other divs, that is not expanding with the inner div content. The code can be found here: <a href="http://jsfiddle.net/pR7bq/" rel="nofollow noreferrer">http://jsfiddle.net/pR7bq/</a></p>
  
  <p>I can't remove height: 100%; from #container, because it needs to accomodate less content as well. I have seen the mention of using </p>
  
  <pre><code>&lt;br style="clear:both" /&gt;
  </code></pre>
  
  <p>but I'm either using it incorrectly or it's not working. I found this well written out answer to the same or similar problem here: <a href="https://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best">What methods of ‘clearfix’ can I use?</a>, however, I'm at a loss as to where to put the code. My best attempts have yielded failure. I have also tried using overflow attributes, but I don't want the scrollbar to appear on the div rather than the page, if that makes sense.</p>
  
  <p>I appreciate all help, and thank you in advance.</p>