CSS Footer Issue

[andrewtayloruk]

Hi, i'm having a little trouble getting my my css working the way i'd like.

Basically i have a fixed height header and footer, in between the two i want to have a content <div> that will expand to however long the content inside needs it to.

I have set the footer as position absolute bottom 0px and it works but if you resize the window and the content in the container is longer than the window then the footer stays at the bottom of the current window and not the bottom of the content.

The content will then flow over the footer and i'll end up with the footer half way up the page when you scroll down to see the content.

I know i'm telling it to sit at the bottom of the current window but i need it to sit at the very bottom of the page AND under the content. I hope this makes sense. :D

Any help would be greatly appreciated.

Here is the code...

CSS
/* Headbar */

div.headbar_container { position: absolute; top: 35px; left: 0px; right: 0px; width: 100%; height: 169px; z-index: 1; background: url('/site/images/elements/header_bar_background.jpg'); background-repeat: repeat-x; }

/* Containers */

div.content_container { margin-top: auto; margin-bottom: 55px;; position: absolute; top: 206px; width: 100%; height: auto; z-index: 1; margin-left: auto; margin-right: auto; text-align: center; }

div.content { width: 784px; height: auto; margin-left: auto; margin-right: auto; background-color: green; }

/*Footer */
div.footer_container { position: absolute; bottom: 0px; left: 0px; right: 0px; width: 100%; height: 55px; z-index: 3; background: url('/site/images/elements/footer_background.png'); background-repeat: repeat-x; }

[4css]

Hi andrewtayloruk

Welcome to WebmasterWorld!

Have you tried a wrapper div? Putting all your other divs within the wrapper?

I don't work with position absolute or relative, so I am not familiar with this way of designing (guess I should play with it and learn it ;) ) The way I do this is a fixed container, and put my divs within that, and use floats. I even include the footer within it.

I'm sure someone with more experience with the positions you are working with can be of more assistance to you.

4~css!

[andrewtayloruk]

Thanks for the welcome. :D There is so much cool stuff on this site...

I have everything inside a container div that has a height and width of 100%. I'd love to know how to solve this but in the meantime i'm going to change my footer so rather than be stuck to the bottom it will just sit at the bottom of the content with a relative position rather than absolute bottom.

Thanks for your reply. :D

[4css]

Yes, there is a ton of information on here, in fact, if you do a search for your problem, you might find that someone else has had the same problem. And the resolution that you seek could be within a post somewhere on here.

If you do resolve your issue, could you please post your resolution? This would help others that come along with a problem. Thanks.

4~css!

[andrewtayloruk]

I've done a search and can't seem to find what i'm after. I'm sure somebody else must have had the same issue and fixed it but i have to get my site done a.s.a.p to get some work in so will need to end the search.

I have managed to get a semi-working solution using tables but then i remembered height is not part of the table spec so i reverted back to css.

Thanks

[4css]

You are better off using css.

try a google of footer position, or something of that sort, and most of the time you will see a link to a thread here on WebmasterWorld and might just find your answer.

[andrewtayloruk]

Thanks for the reply, believe me i've been searching for a solution to my problem for days... Would it be cool to pm you a link of my site so you can see the problem i'm having?

[4css]

andrewtayloruk

I would imagine that it would be ok. It will be best to keep the thread update though with any findings so that it is here for others searching for information.