thisandthatguy thisandthatguy - 4 months ago 15
CSS Question

Keep Footer At Bottom Of Page

I've got the following:

<div class="wrapper">
<div class="top">
</div>

<div class="left">
</div>

<div class="main">
</div>

<div class="footer">
</div>
</div>


With the following CSS:

.top {
position: absolute;
left: 0;
height: 80px;
width: 100%;
}


.left {
position: absolute;
left: 0; top: 80px; bottom: 100px;
width: 200px;
margin-left: 5px;
}

.main {
position: absolute;
left: 200px; top: 80px; bottom: 100px;
width: 84%;
}

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


I'd like to keep the
footer
at the bottom of the page (after
left
and
main
, and regardless of how big/small
main
is), but with
position: fixed
the footer scrolls up/down as you scroll through the page. I've tried
position: absolute
and that doesn't push the footer all the way to the bottom. I've tried some of the other solutions found here and none have worked. How can I keep the footer at the bottom of the page (similar to the
footer
at the bottom of this page)?

Thanks in advance!

Answer

Try this:

.footer{
   position:absolute;
   bottom:0
}

Position absolute moves footer according to the element that contains it. Bottom 0 keeps the footer at the bottom of it's parent.

This will work if the parent of the absolute positioned element has relarive position. To say it more particular, your wrapper needs to have the following code:

.wrapper{
   position: relative
}