title: Fixed non scrolling footer inside a div?
body: <p>I am making a small div on the center of the page which has a footer which is fixed but the div is scroll-able.<br>
  According to me there are two ways to do it:  </p>
  
  <ol>
  <li>Using <code>position:fixed</code> : Fixed position actually work relative to the browser window but I want position relative to my small div  </li>
  <li>Using <code>position:absolute</code> : Using <code>bottom:0;</code> I solved the problem initially but the footer scroll with the div text.</li>
  </ol>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="box"&gt;
          &lt;div id="header"&gt;
              &lt;h1&gt;Heading&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div id="content"&gt;
             Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text 
          &lt;/div&gt;
          &lt;div id="footer"&gt;
              &lt;p&gt;Fooooooooooooooooooooooooooter&lt;/p&gt;            
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p><strong>CSS</strong>:  </p>
  
  <pre><code>#wrapper{
      width:600px;
      height:500px;    
      border:thin solid #c00;
  }
  #box {
      width:400px;
      height:300px;
      margin:100px auto;            
      border:medium dashed #c00;
      position:relative;    
      overflow:auto;
  }
  #content {
      background-color:rgba(0,0,208,0.1);   
  }
  #footer {
      position:absolute;
      bottom:0px;
      width:100%;
      height:50px;
      background-color:rgba(0,0,0,0.8);
      color:#fff;
  }​
  </code></pre>
  
  <p>To See: <a href="http://jsfiddle.net/knoxxs/6W5uq/19/" rel="noreferrer">JSfiddle</a></p>
  
  <p>How to make the footer fixed for this div?</p>