title: Margin-top for absolute positioned div with bottom property
body: <p>I'm creating a div as a footer as such:</p>
  
  <pre><code>&lt;div class="content"&gt;blah blah blah&lt;/div&gt;
  &lt;div class="content"&gt;more content&lt;/div&gt;
  &lt;div class="content"&gt;even more content&lt;/div&gt;
  &lt;div id="footer"&gt;blah blah blah&lt;/div&gt;
  </code></pre>
  
  <p>The CSS for the footer is as follows:</p>
  
  <pre><code>#footer{
      height: 50px;
      display: block;
      position: absolute;
      right: 0;
      left: 0;
      bottom: 0;
  }
  </code></pre>
  
  <p>So how do I leave a <code>50px</code> space between <code>content</code> and <code>footer</code>? I've tried adding a spacer div between the two but yielded no success. The spacer div needs to be more than the height of <code>content</code> for it to have any effect. I've tried <code>margin-top</code> to <code>#footer</code>, which didn't work, but I do not want a <code>margin-bottom</code> for <code>content</code> because the content containers are multiple. Setting a bottom margin for the <code>content</code> would ruin how they render. Thanks for any help.</p>
  
  <p>P.S. this is not a duplicate to <a href="https://stackoverflow.com/questions/9350775/set-position-absolute-and-margin">Set position absolute and margin</a>.</p>
  
  <p><a href="https://i.stack.imgur.com/HhHFA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HhHFA.jpg" alt="Appearance sketch of what I want to achieve"></a></p>