title: Align DIV to bottom of the page
body: <p>I have a DIV that needs to be aligned to the bottom of a search result page, <strong>problem</strong> is whenever there is <strong>no search result</strong> or <strong>less rows of search result</strong> displayed on the page, the <strong>DIV goes up from the bottom of the page</strong>.</p>
  
  <p><img src="https://i.stack.imgur.com/kdirS.jpg" alt="enter image description here"></p>
  
  <p>but it should be placed like this</p>
  
  <p><img src="https://i.stack.imgur.com/So9NN.jpg" alt="enter image description here"></p>
  
  <p>and whenever there are <strong>more rows</strong> and the page can be <strong>scrolled down</strong>, the DIV should be place like this.</p>
  
  <p><img src="https://i.stack.imgur.com/gWBsW.jpg" alt="enter image description here"> </p>
  
  <p>My currrent code looks like this</p>
  
  <pre><code>        &lt;div id="bottom-stuff&gt;
  
              &lt;div id="bottom"&gt;
                               // DIV stuff
              &lt;/div&gt;
  
          &lt;/div&gt;
  
  
  #bottom-stuff {
      padding: 0px 30px 30px 30px;
      margin-left:150px;
      position: relative;
  }
  
  #bottom{
  
      position: absolute; bottom: 0px; 
  }
  </code></pre>