Footer position fixed to screen

Question

I have been unable to get my footer fixed to screen. Meaning when the page is viewed I would like to see footer at all times. I have tried position(fixed, absolute) but have been unable to solve. I have searched the web, but am still having difficulty getting to stay at bottom of screen thanks in advance for any help

tried: position: fixed and position: absolute

 .bo-wrap { clear: both; width: auto; } .bo-footer { clear: both; width: auto; padding: 5px; margin: 0 auto; width: 960px; height: 25px; } .bo-footer-social { text-align: center; line-height: 1px; } .bo-footer-smap { width: 300px; float: left; padding: 5px 10px; text-align: left; font-size: 18px; } .bo-footer-uonline { width: 300px; /* Account for margins + border values */ float: left; padding: 5px 10px; text-align: center; } .bo-footer-power { width: 300px; padding: 5px 10px; float: left; text-align: right; font-size: 14px; color: #636A7D; vertical-align: middle; } .bo-footer-copyright { text-align: center; color: #BDC3CF }

 <div class="bo-wrap clr4"> <div class="bo-footer"> <div class="bo-footer-social"></div> </div> </div> <div class="bo-wrap clr3"> <div class="bo-footer"> <div class="bo-footer-smap"> <a href="http://www.bangalionline.com/sitemap.php">Sitemap</a> | <a href="http://www.bangalionline.com/terms.php">Policy</a> | <a href="http://www.bangalionline.com/contact.php">Contact Us</a> </div> <div class="bo-footer-uonline"> <script id="_wautoy"> var _wau = _wau || []; _wau.push(["small", "p6egqc1t5bze", "toy"]); (function() { var s = document.createElement("script"); s.async = true; s.src = "http://widgets.amung.us/small.js"; document.getElementsByTagName("head")[0].appendChild(s); })(); </script> </div> <div class="bo-footer-power"> Powered By JK - <a href="http://www.jobaerulkaes.com/">Web &amp Apps Developer</a> </div> <div class="clearfix"></div> </div> </div> <div class="bo-wrap clr4"> <div class="bo-footer"> <div class="bo-footer-copyright">&copy;2019 Timeless Consignment All rights reserved.</div> </div> </div>

Answer 1

I wrapped the three footer div, class = wrapper, footer-wrapper

   <div class="wrapper footer-wrapper">
    <div class="bo-wrap clr4">
      <div class="bo-footer">
        <div class="bo-footer-social"></div>
      </div>
    </div>
    <div class="bo-wrap clr3">
      <div class="bo-footer">
        <div class="bo-footer-smap">
          <a href="http://www.bangalionline.com/sitemap.php">Sitemap</a> | <a
            href="http://www.bangalionline.com/terms.php">Policy</a> | <a
            href="http://www.bangalionline.com/contact.php">Contact Us</a>
        </div>
        <div class="bo-footer-uonline">
          <script id="_wautoy">var _wau = _wau || []; _wau.push(["small", "p6egqc1t5bze", "toy"]);
            (function () {
              var s = document.createElement("script"); s.async = true;
              s.src = "http://widgets.amung.us/small.js";
              document.getElementsByTagName("head")[0].appendChild(s);
            })();</script>
        </div>
        <div class="bo-footer-power">
          Powered By JK - <a href="http://www.jobaerulkaes.com/">Web &amp Apps Developer</a>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
    <div class="bo-wrap clr4">
      <div class="bo-footer">
        <div class="bo-footer-copyright">&copy;2019 Timeless Consignment All rights reserved.</div>
      </div>
    </div>
</div>

Then styled the wrapper position absolute, width 100% and bottom set to 0:

.wrapper.footer-wrapper{
 position: absolute;
 width: 100%;
 bottom: 0;
}