title: CSS Section Automatically Adjust Height?
body: <p>I have a HTML section "all" that wraps around two other sections. I'm having trouble getting the website to adjust the height of the "all" section based on the length of stuff I put into the other two sections.</p>
  
  <pre><code>&lt;section id="all"&gt;
     &lt;section id="left_content"&gt;
        &lt;p&gt;Something here.&lt;/p&gt;            
     &lt;/section&gt;
     &lt;section id="right_content"&gt;
        &lt;p&gt;Something here.&lt;/p&gt;
     &lt;/section&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>I currently have the height set at a fixed size of 700px. I was wondering if it was possible in the CSS, to have that section's height be related to the size of the left_content and right_content sections.</p>
  
  <pre><code>#all {
      width: 900px;
      height: 700px;
      margin: 0 auto;
      padding-top: 20px;
      background: #F4F4F4;
  }
  
  #left_content {
      float: left;
      width: 570px;
      margin-top:-20px;
      padding: 0px 20px 10px 20px;
      line-height: 25px;
      font-size: 12px;
  }
  
  #right_content {
      border-left:4px solid #cccccc;
      float: right;
      width: 250px;
      padding: 0px 10px 20px 20px;
      line-height: 20px;
      font-size: 12px;
  }
  </code></pre>