title: HTML/CSS Footer not sticking to bottom moving on screen resize
body: <p>I have the following attempt, trying to make a simple sticky footer.</p>
  
  <p>My problem is the <strong>footer is not sicking to the bottom</strong>, I suspect it might be a css problem. </p>
  
  <p>Would greatly appreciate it if someone can give the following code a scan and provide some advise.</p>
  
  <pre><code>    #footer { /* position must be absolute and bottom must be 0 */
      height: 100px;
      width: 100%;
      background: red;
      position: absolute;
      bottom: 0;
  }
    &lt;footer class="footer" id="footer"&gt;
       &lt;div class="footLeft" style="width:75%; float:left;"&gt;
       &lt;/div&gt;
       &lt;div class="footerRight" style="width:25%; float:right; padding:25px;"&gt;
          &lt;button class="btn btn-danger" style="font-size:20px;"&gt;Sign Up&lt;/button&gt;
       &lt;/div&gt;
      &lt;/footer&gt;
  </code></pre>
  
  <p><strong>The Problem Im having / Output</strong></p>
  
  <p><a href="https://i.stack.imgur.com/y2f4v.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y2f4v.png" alt="enter image description here"></a></p>