title: CSS - Automatic div height?
body: <p>I have a main container where the whole site is based around. </p>
  
  <p>Inside the container, other than all the headers, text &amp; footers etc. I have some expandable div's which slide up and down, thus the need to have the overall height of the container to adjust to the size of the expanded divs.</p>
  
  <p>Now, I have done this before just using: height:100%, but for some reason, that causes the border effects of the container to disappear. It only seems to work with a fixed height such as: height:1000px.</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>   #container {
          position: relative;
          top: 5px;
          width: 980px;
          height: 100%;
          margin: 0 auto 0;
          box-shadow: 0 0 5px rgba(159,159,159,0.6);
          -o-box-shadow: 0 0 5px rgba(159,159,159,0.6);
          -webkit-box-shadow: 0 0 5px rgba(159,159,159,0.6);
          -moz-box-shadow: 0 0 5px rgba(159,159,159,0.6);
      }
  </code></pre>
  
  <p><strong>HTML:</strong> (pretty much like this)</p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;div id="top-banner"&gt;
      &lt;div id="logo"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="col1"&gt;text+expandable divs&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Am I doing something wrong?</p>