Sticky Footer CSS Problems

Question

Hi all,

I have been able to design my layout so that it has 2 columns and a width of 100%, you can see that here.

Now I'm trying to implement a sticky footer (100%) height with this layout which also has the background in the right hand column flow down the footer and also with the border I have in the left hand column.

Is there a way to do this with my current layout or it would great if anyone could suggest an alternative to the way I'm currently doing it!

Thanks!

Answer 1

Take a look at Sticky Footer 2009. This has been discussed multiple times on SO as well.

Answer 2

I would add a CSS class to the DIV containing the columns and style that. To get close, I had to add the following to your CSS file:

body
{
 height: 100%;
}

.footer
{
 position: absolute;
 top: 90%;
 left: 0;
 height: 10%;
}