Search code examples
csslayoutpositionsticky-footer

Sticky footer with absolutely positioned page


Some of you may know me from this question: Sticky Footer (not sticking!)

Thanks to Andres Ilich for pointing out why my footer didn't stick to the bottom of the page - because my site uses absolute positioning throughout.

So, I tried using floats etc. so that my elements to remain in the document flow and so that the footer knows where to go, however I simply couldn't do it - due to the exactness I require, I simply couldn't give up absolute positioning!

So - can anyone help me find out a way to either make the footer stick to the bottom (did I mention I also have some dynamic content?) and keep my positioning as it is, or an easy way to keep my elements in the document flow, but with the precision of absolute positioning.

This is my site: http://mc-airlines.hostei.com/

I would post my source code but it's long and largely irrelevant to the problem, so if possible could you just use the View Source function in-browser.

Thanks in advance!

Novice Coder not knowing what to do.


Solution

  • This would make it work:

    #container {
      min-height: 100%; /* ERASE THIS*/
    }
    
    .clearfooter{
    /*ADD THIS*/
    position: fixed;
    bottom: 0;
    z-index: 9999;
    /*ERASE THIS*/
    clear:both;
    }
    

    I would strongly recommend you to re-write your CSS. Everything is absolutely position, it's quite confusing.

    btw, this are not propieties:

    position: float;
    float: bottom;
    

    position takes > absolute / fixed / static / relative.

    float takes > left / right / none.

    More here and here.