title: html HR line getting cut by css absolute+relative positioning
body: <p>Here is my HTML code- </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;link type="text/css" href="/static/theme.css" rel="Stylesheet" /&gt;  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="footer"&gt;
  &lt;hr&gt;Copyright content goes here&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>content of theme.css is </p>
  
  <pre><code>#footer {
      position: absolute;
      bottom: 0px;
      color: #f00;
  
  }
  </code></pre>
  
  <p>when I view the HTML, I see that HR line is available (width of line) only till the content "Copyright content goes here". I need to make sure that copyright content is available at the very bottom only so I'm using absolute+relative CSS. </p>
  
  <p>When I change position to relative, it works fine- I see full HR line. </p>
  
  <p>why is absolute+relative positioning "cutting" the HR line?</p>