Footer won’t push down with content

[quigs1969]

Hi Folks,

I have been designing the layout for a local history site and I thought I had using div tags and pure css to create the site cracked.

I tried design it with different screen resolutions in mind and used includes to bring in the header and footer in to join the body of the page, this seemed to be going ok, I had everything in the right place and the resolution was changing when I maximised and minimised it.

If I insert an image into the contents that fits in between my header and footer as long as it is below 800×600 everything is ok (my monitor is 1280×1024) 800px high is what is left when I take the header and footer off, you can see this at My Site 1

However when I add an image and content that is greater than 800px high it goes behind my footer and I could not see it I added overflow:scroll and it lets me scroll down to the content but the footer wont push down with the content and seemsfixed to my screen resolution.

Is there a way I keep the footer pushing down as I scroll down the contents? how can I do this without losing fluidity?

You can see the problem the of content and footer here My site 2 example

Please help, I have put a lot of hours into this and I do not want to give up and go back to tables.

Colin

[Paulie_D]

You seem to be using an awful lot of absolutely positioned divs and set heights which might be the issue. Have you considered floats, overflow: hidden and clearing floats?

[anotherworld]

Yep that is the probelm just looked at your CSS if you make a div position absolute it takes it out of the flow of the page and wont push the container down. excuse the pun but you should keep your absolute positioning to an absolute minimum. i would say the container and any logos you need in a certain position everything else I would use relative positioning.

[quigs1969]

Thanks guys,

I scrapped it and used a trial version of the Flexi CSS Layouts plugin, it seems ok now although there seems a lot of code and the seem to have split up div attributes between layout and design. You can see it here I think it is a lot more fluid now Page built with Flexi CSS Layouts.

This page wrapper has min-height of 950px, which leaves 700px for body/content, good for the example page above which has one image 800×600. If I want content greater than this I will have to increase wrapper min-height +950px and adjust the body/content height appropriatly.

There is not one absolute or relative position in this design?

[Paulie_D]

Why set min-heights at all, why not just elements be the size they want to be? Surely if your content is greater than the current stated minimum it will just push the footer down?

I can see setting a min-height of 100% (although I don’t think IE6 supports it) to the body.

[Paulie_D]

I’m not familiar with the plugin you mentioned but just a cursory glance at some of the mark-up would seem to indicate an overuse of divs. The header alone seems to have 7 or 8 when one would probably do.

You can position images with floats and margins and the background could be done with a gradient.

This is coming off as over-critical which I don’t want to do but I do think you could lighten the markup weight considerably.

[Author]

Posts