CODEWITHSUNDEEP
htmlcssfooter
user1224534
user1224534

Reputation: 137

Website Footer wont stick to the bottom of page

Im trying to get a footer to stick to the bottom of my webpage but it floats only half way up. I've looked at a few examples and I cant see what im doing wrong. Any assistance would be greatly appreciated. My simplified code is shown below. 

<html>
<head>
</head>

<body>
    <div id = "wrapper">
        <!--Wrapper div for the main content-->
    </div>
        <!--Footer container-->
    <div class="footer">    
    </div>
</body>

</html>


--CSS-- 

body
{
height: 100%;
margin: 0;
padding:0;
background-color: #1A1F2B;
min-width: 960px;

}

#wrapper{
min-height: 100%;
}

.footer{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
display: block;
background-color: #232A3B;
}

Upvotes: 1

Views: 276

Answers (2)

greenyouse
greenyouse

Reputation: 379

If you'd like the footer div to be on the bottom of the page and span the entire width this would work:

.footer {
    position: absolute;
    bottom:0;
    height: 150px;
    width: 100%;
    background-color: #232A3B;
}

HTML5 also supports the <footer> Tag which may make it easier for bots to process the information on your webpage. To change that just use footer { instead of .footer { and change the HTML markup.

Upvotes: 1

nickf
nickf

Reputation: 546503

If you want it to be at the bottom of the document:

.footer {
    position: absolute;
    bottom: 0;
}

If you want it to be at the bottom of the viewport:

.footer {
    position: fixed;
    bottom: 0;
}

Upvotes: 5

Related Questions