title: CSS: Dock element to bottom of page and its top to bottom of upper element?
body: <p>I need to glue an element to the bottom and to the top, but I want to keep a dynamic space from the top that another element goes in, I want the <code>top</code> to be that element size + some space.</p>
  
  <p>How is this possible (Pure CSS preferred)?</p>
  
  <p><strong><a href="http://goo.gl/1WdyI" rel="nofollow" title="Open example in jsFiddle">Here</a></strong> is an example:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;header id="header" class="center"&gt;
  Hello and welcome to my demo!
  &lt;/header&gt;
  
  &lt;header id="slider" class="center"&gt;
      &lt;img src="http://goo.gl/o6tho"/&gt;
  &lt;/header&gt;
  
  &lt;div id="content" class="center"&gt;
      I want this area to be glued to the footer + 10px space
      And additionally, glued to the element on top of itself + 10px
      The slider can disappear, which should result in the content
      to grow and reach the heaader.
  &lt;/div&gt;
  
  &lt;footer class="center"&gt;
      All rights reserved.
  &lt;/footer&gt;
  ​
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.center
  {
      width: 200px;
      margin-left: auto;
      margin-right: auto;  
      right: 0px;
      left: 0px;
  }
  
  #header
  {
      background: green;
      color: white;  
      height: 50px;
      position: fixed;    
      top: 0px;    
  }
  
  #slider
  {
      height: 60px;
      position: fixed;
      top: 60px;
  }
  #slider img
  {
      max-width: 100%;
  }
  
  #content
  {
      background: beige;    
      height: 50px;
      bottom: 10px;
  }
  
  footer
  {      
      background: blue;
      color: white;  
      height: 50px;
      position: fixed;    
      bottom:0px;
  }
  </code></pre>