Content Overlapping Footer

[Demon]

Hello,

Just today I've finally started having a go with absolute and relative positioning after being long devoted to using floats. It's gone mostly okay, but I've run into a problem which you should be able to see here. If you want to see the stylesheet, then here you go.

So quite simply, why is my content running over the footer? The footer is outside of the big relatively positioned container (in which all my absolutely positioned elements like the navigation boxes and the main content and Twitter areas sit.

So why isn't that box stretching to fit and pushing the footer (and anything that comes after the relatively positioned container) down to suit? I don't get it. Hopefully you do! All comments and advice appreciated.

[aj_nsc]

Absolutely positioned elements, regardless of what elements they are inside are not considered to be in the normal document flow, and thus their positions and dimensions have no effect on anything else on the page.

Remove all other stylings on #scooby and replace with this:

#scooby {float: right; }

Floats are also considered out of the normal document flow like absolutely positioned elements, but they still effect other elements around them.

That took care of it for me.

[Demon]

Absolutely positioned elements, regardless of what elements they are inside are not considered to be in the normal document flow, and thus their positions and dimensions have no effect on anything else on the page.

Remove all other stylings on #scooby and replace with this:

#scooby {float: right; }

Floats are also considered out of the normal document flow like absolutely positioned elements, but they still effect other elements around them.

That took care of it for me.

Ah, I didn't realise that absolutely positioned elements weren't in the flow. That explains it then. I applied the fix as instructed, and it almost works. I get this...

So the wrapper now fits around everything, but you can see the footer text and border bunched up under the navigation boxes still. That's all supposed to be right down at the bottom where the social networking items are.

[aj_nsc]

Add to your footer stylings:

clear: both;

That will cause the footer to drop below any floated items that it's close to.

[Demon]

Bingo! Thank you very much, mate. Been working on this all day and read some ridiculously long and difficult hacks for this kind of stuff.

Where do I send the fruit basket?