If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Content Overlapping Footer

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.

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:

Code:

#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.

I've switched careers...
I'm NO LONGER a scientist,
but now a web developer...
awesome.

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:

Code:

#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.