Sticky footer w/ multiple container divs

HTML & CSS
1

I can get my footer to sit on the bottom of the page, but for some reason the min-height:100% doesn’t seem to be stretching the content itself down to meet it.
Please accept that I need the container divs to affect graphics which aren’t currently present… I thought the min-height on background should affect all its contents, but it seems not to be at all, and I’ve tried a few other height settings with no luck.

http://ctrlshiftweb.com/test/HoE/test.html

2

if i set the background div to min-height 100% though it doesn’t have any effect. it is impossible to do a sticky footer with that number of nested divs?

3

Hi,
You only get one shot at min-height:100%; and that is on a direct child of the body,html elements which have their height set to 100%.

You can’t get min-height:100% on the nested child (which is your #container div) of your #background div.

4

Hi,

As Ray said you can only have one element that stretches from top to bottom because and that is the element called #container in your page.

It has a min-height: of 100% which it gets from the height:100% set on html and body.

You cannot nest anymore elements inside #container and give them min-height:100% because you can only base min-height on a parent that has a real height set (e.g height:100%). You can’t base it on a parent that has only min-height because the child then collapses to height:auto.

You can’t set #container as height:100% either because then it will never grow. It’s a catch 22 situation.

What you need to do is be creative and try to do everything on that first element with some sort of composite image if you are trying to make equal columns and borders.

At present you have completely wasted the 100% height effect of #container by applying an image to it that could have been placed in a normal nested div such as your header.

Use #container for the full height background that you wanted.

I’d need to see a picture of what you are trying to do to let you know if its possible or not.

If you are creative you can often achieve these things.

http://www.pmob.co.uk/temp/sticky-footer-2col.htm
http://www.pmob.co.uk/temp/100-with-rightbar.htm