Problems with css footer

Question

I have a page that has a header, a footer middle section that should grows to fill the rest of the page.

i.e. it looks like this

Let me describe the layout I'm wanting header = 100% of page width with a fixed height. I don't want it floating. content = min width of 760pixels, max of 1000pixels Height to fill up to the end of the page. But, not overlap the footer. Footer should be pushed down. If content is less than 100%, footer should be at the bottom, not moved up. footer = 100% page width and always at the bottom of the content.

Now the problem I'm having is making the footer go to the bottom. I can get it to go beneath the content div, but not to the bottom of the page.

How would I achieve that in CSS? It seems awfully hard to do simple things like that.

Answer 1

See this for code on a bunch of different layout formats.

Check my implementation here.

Answer 2

You want position absolute with bottom: 0

You also want to make sure that the z-index is high so that content will flow under it (well, that's really your choice).

If I understand well your question, that will keep the footer at the bottom of the page, no matter the content.

Answer 3

Hi:

Links that might be helpful :

• css-fixed-footer
• fixed-footer
• an-old-implementation-of-fixed-footer

My thinking would be:

get a min-height attribute set for the content div (might need workaround with IE, as always)

or, get absolute positioning for the footer to bottom and set a negative margin to top, say, if the footer height is fixed to 50px, then set margin-top to -50px

Sorry I am working at the moment so I cannot craft a demo page :)

One critical thing for this design is to verify that the solution works for all contemporary browsers.