title: Keep footer at the bottom when using absolute positioned main elements
body: <p><strong>Scenario</strong></p>
  
  <p>I am using a page layout with three main elements.</p>
  
  <p>x1 <strong>central column</strong></p>
  
  <pre><code>position:relative;
  padding-right:300px;
  </code></pre>
  
  <p>x2 <strong>sidebar pieces</strong> on the right side</p>
  
  <p><strong>1-sidebartop</strong></p>
  
  <pre><code>position:absolute;
  top:0;
  right:0;
  height:250px;
  width:300px;
  </code></pre>
  
  <p><strong>2-sidebarbottom</strong></p>
  
  <pre><code>position:absolute;
  top:250px;
  right:0;
  width:300px;
  </code></pre>
  
  <p><strong>HTML STRUCTURE</strong></p>
  
  <pre><code>&lt;div class="sidebartop"&gt;&lt;/div&gt;
  &lt;div class="main"&gt;&lt;/div&gt;
  &lt;div class="sidebarbottom"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>Why am I doing it this way?</strong></p>
  
  <p>Because I would like the sidebar to be fixed-width and let the central column take the rest of the horizontal available space.</p>
  
  <p><strong>But... why am I splitting the same sidebar in two pieces, instead of floating or inline-block aligning the two columns?</strong></p>
  
  <p>Because I want the upper side of the sidebar to stay before the main content on mobile devices, for which I just do <code>position:relative;</code> to all elements, so they flow into the desired mobile structure.</p>
  
  <p><strong>So what's the problem?</strong></p>
  
  <p>The sidebar structure makes it quite complex to keep the footer at the bottom. Right now I am using a javascript approach to reposition the footer on the fly. I am thinking about a clever way to achieve this with pure css.</p>
  
  <p>You can see a JSFiddle <a href="https://jsfiddle.net/44wmqz00/3/" rel="nofollow">here</a>.</p>
  
  <p>Thank you very much for taking your time.</p>