/    Sign up×
Community /Pin to ProfileBookmark

Content Overlapping Footer

Copy linkTweet thisAlerts:
Jul 30.2010

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 [URL=”http://www.media-live.co.uk/test/test.html”]here[/URL]. If you want to see the stylesheet, then [URL=”http://www.media-live.co.uk/test/test.css”]here[/URL] you go.

So quite simply, why is my content running over the footer? The footer is [I]outside[/I] 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.

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@aj_nscJul 30.2010 — 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:

<i>
</i>#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.
Copy linkTweet thisAlerts:
@DemonauthorJul 30.2010 — 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:

<i>
</i>#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.[/QUOTE]

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.
Copy linkTweet thisAlerts:
@aj_nscJul 30.2010 — Add to your footer stylings:

<i>
</i>clear: both;


That will cause the footer to drop below any floated items that it's close to.
Copy linkTweet thisAlerts:
@DemonauthorJul 30.2010 — 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? ?
×

Success!

Help @Demon spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...