CODEWITHSUNDEEP
cssfooter
user1678673
user1678673

Reputation: 9

Footer Won't Stick to the Bottom

My footer won't stick to the bottom of the page when there is not enough content, for example, when someone does a search for which there are no results the footer shows in the middle of the screen instead of staying at the bottom of the page.

I've read all the other posts but it seems that the code is different to mine.

This is the footer CSS code:

    .footer {
    padding: 10px 0;
     }

      #footercontainer {
    clear:both; 
    width:100%; 
    position:relative; 
    height:250px;
    bottom:0;

    }
#footer {
    clear:both; 
    padding-top:0px; 
    width:100%; 
    position:absolute; 
    bottom:0;
    left:0;
}

#footer img {
    border:none; 
    text-align:center;
}

#footermiddlecontent {
    width:973px;
     margin-left:auto; 
     margin-right:auto;

     }
#footermiddlecontent p {
    font-size:14px;

    }
#footermiddlecontent a {
    font-size:12px; 
    font-family:arial;

    }
#footerbottom p {
    text-align:center; 
    padding-top:5px; 
    font-size:12px; 
    font-family:arial;

    }
#footerbottom a {
    font-family:arial;

    }

Upvotes: 1

Views: 601

Answers (3)

Mike
Mike

Reputation: 72

You need to set the html, body and any other parent element to 100% height. If you could post the rest of your HTML and CSS that makes up the page, I can try to help you more.

Upvotes: 0

desbest
desbest

Reputation: 4896

It looks like you need to use the CSS Sticky Footer.

Upvotes: 1

atar
atar

Reputation: 96

have you tried using position:fixed

Upvotes: 0

Related Questions