title: div breaks out of its container
body: <p>I believe there is a simple answer to this question but I have an issue where my content div container doesn't extend far enough for me to scroll through my textbox div.</p>
  
  <p>It seems like there is an additional 200-300 px below the content div that is preventing me from seeing everything in the textbox div, even when there is no scrolling needed I cannot view the page because my background colour is covering the last 200-300 px of text data. I have tried putting an empty div inside the textbox and at the bottom of the content div but no use... Here is my code. If you need more info to help me I can provide it.</p>
  
  <p>Relevant CSS:</p>
  
  <pre><code>#imgscroll{
      height:200px;
      width:100%;
      position:absolute;
      overflow:hidden;
      z-index:998;
  }
  #content {
      position: absolute;
      left: 254px;
      top: 0px;
      width: *;
      height:auto;
      min-width:500px;
      overflow:hidden;
      background-color: #FFF;
      z-index:1;
  }
  #textbox{
      position:relative;
      top:210px;
      background-color:#CFF;
      margin:10px;
      overflow:hidden;
      padding:12px;
      min-width:500px;
  }
  #footer{
      position:relative;
      background-color: #099;
      text-decoration: none;
      color: #FFF;
      height: 30px;
  }
  </code></pre>
  
  <p>Relevant HTML:</p>
  
  <pre><code>&lt;div id="content"&gt;
  &lt;div id="imgscroll"&gt;
  
  &lt;ul id="scroller"&gt;
  
      &lt;li&gt;&lt;img src="images/slider/image-1.JPG" width="267" height="200"&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;img src="images/slider/image-2.jpg" width="267" height="200"&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;img src="images/slider/image-3.JPG" width="267" height="200"&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;img src="images/slider/image-4.JPG" width="267" height="200"&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;img src="images/slider/image-5.jpg" width="267" height="200"&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;img src="images/slider/image-6.JPG" width="267" height="200"&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  
  &lt;/div&gt;
  
  &lt;div id="textbox"&gt;
  &lt;h1&gt;Home&lt;/h1&gt;
  &lt;br /&gt;
  All my text is here empty divs below don't fix it. Usually this text is much longer and 
  
  whether there is scrolling involved or not, it is still an issue.&lt;br /&gt;
  &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt; I cannot see this text at the bottom.
  &lt;div&gt; &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="footer"&gt;
  (c) My Company Name 
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>