title: Parent div not expanding to children's height
body: <p>As you will see, I have a <code>div</code> (<code>#innerPageWrapper</code>) that wraps around the divs that contain the content. <code>#innerPageWrapper</code> also does act visually as a semi-transparent border in the layout.</p>
  
  <p>My problem is that <code>#innerPageWrapper</code> won't expand to fit the children inside, let alone expand to fill the rest of the page.</p>
  
  <p>This is the code for <code>#innerPageWrapper</code></p>
  
  <pre><code>#innerPageWrapper {
      width: 1100px;
      height: 100%;
      display: inline-block;
      padding: 0 50px 0 50px;
      background: rgba(0, 0, 0, 0.75) url(navShadow.png) repeat-x top;
      -webkit-border-top-left-radius: 20px;
      -webkit-border-top-right-radius: 20px;
      -moz-border-radius-topleft: 20px;
      -moz-border-radius-topright: 20px;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
  }
  </code></pre>
  
  <p>I have tried many things (including using calc() for div heights) unsuccessfully. I want to avoid using jQuery.</p>