Footer won't stay below content

[caravanguard]

Hi there

I've build a template using CSS positioning, but I can't get the footer to stay below the content when the content expands. I know it's something to do with positioning and floats, but I don't know where to start or even whether to start again.

Can anyone offer a solution? page: http://www.leisuredays.co.uk/static-...testindex.html

CSS http://www.leisuredays.co.uk/new.css

[downtime]

There is something strange with the way you created the page that has this not really acting like a column layout and I think that is causing the white gap near the bottom above the footer. The expandedcontent div seems outside the normal flow and is just constrained to fit where it is. When ever your right column pushes the container box lower than expandedcontent div, you're going to get that white box.

It might be better if you had a maincontent div that had three column divs inside it, floating next to each other. You can use the maincontent div to repeat your background image vertically so that the entire content area's background extends to the bottom of the maincontent div and you don't get gaps.

Typically when using floats, if something isn't working the way you expect, the problem is caused by either widths not being what you expect or you haven't cleared elements that need to be cleared.

For something like a footer that should span the entire width, you should use:

clear: both;

On your footer div. This will make sure nothing floats to the left or right of it.

[caravanguard]

I've begun to rebuild with all divs as floats and one background image as you suggested, and so far so good. The footer is floating beneath the content and the mid section expands without any problems. (In FF anyway!)

Thanks for your help!