Footer not flowing to bottom of page

Question

The yellow footer block that appears towards the top of the page should flow to the bottom of the content as a footer normally would.

here is the CSS for #footer:

#footer {
    background-color: #2F3B47;
    padding: 20px;
    height: 180px;
    float: none;
    clear: both;
}

I need the solution to work like a "sticky footer" so that it flows to the bottom of the content block regardless of the heighth of the content div. Thanks for any tips or help!

Answer 1

Like this?

    position: fixed;
    left: 0;
    bottom: 0;

Answer 2

Its not moving to the bottom because you have absolutely positioned all your content. It looks like through scripting youve hacked a height onto #content and various other divs, but you ave not done so for #wrapper therefore #wrapper has a computed height of 0 which is used to calculate the position of #footer in flow.

There for you need to either rework how youre doing this, ie. use floats instead of positioning, or you need to figure out a way to position the footer properly which could be done by applying the same scripting to #wrapper that you have done to various other divs, using position: fixed as another poster suggested or moving footer inside wrapper and using absolute positioning.

Personally i would rework how youre doing it. ABS positioning has its uses but rarely is layout out an entire page included in these uses :-)

Answer 3

You should give a look at http://www.cssstickyfooter.com/

In short you have to have a structure that is in two steps (content and footer).

<div id="wrap">

    <div id="main" class="clearfix">

    </div>

</div>

<div id="footer">

</div>

The footer CSS looks :

#footer {
position: relative;
margin-top: -150px; 
height: 150px;
clear:both;
} 

The complete code is very small and is in the website.

Answer 4

The problem is that your wrapper has no associated height, so although the contents fill the div, they aren't filling out the div.

One approach you can use is to set a minimum height, this will push the footer down.

.wrapper {
min-height:900px;
}

However, your problem will persist as your content grows beyond your min-height. One answer is to make sure all your items are held within a DIV. So if you have a .swf that is 500x500, nest it inside a 500x500 div, this way, the contents of your wrapper will ensure that your footer stays at a fixed distance from the bottom of your content