/    Sign up×
Community /Pin to ProfileBookmark

Locking footer to the bottom of the page?

Copy linkTweet thisAlerts:
Jun 02.2010

Hi guys,

I’m building a site where I need the footer locked to the bottom of the page… but since I’m using floats it’s proving to be difficult.

See the comp:
[url]http://walrusinacanoe.com/v1/canoe2.jpg[/url]

Yes, it’s a silly site. But CSS is serious business ?

Anyhow, what’s the best way to stick the footer to the bottom like so? Much appreciated.

Thanks a bunch!

David

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@tirnaJun 02.2010 — 

Anyhow, what's the best way to stick the footer to the bottom like so? Much appreciated.
[/quote]

There are a few ways depending on your markup. Post your code so we can see what is going on.
Copy linkTweet thisAlerts:
@cbVisionJun 02.2010 — I'd run a google search for "sticky footer". I use this approach:

http://ryanfait.com/sticky-footer/
Copy linkTweet thisAlerts:
@doodler85authorJun 03.2010 — Hey, thanks for getting back to me, guys.

Here's the website (in construction, clearly).

http://walrusinacanoe.com/index_wp.php

I tried the sticky footer but I think it's getting held up because my content is being held in floating divs.

Aside from that, I'd really appreciate some general pointers and critiques on my structure / positioning methods as well (if you have the time). I've done much of my CSS via trial and error so I'm curious what you dudes think.

Thanks again!

David
Copy linkTweet thisAlerts:
@optimus203Jun 03.2010 — Have you tried something like this for the footer div?

{position: fixed; bottom: 0px; width: 100%;}
Copy linkTweet thisAlerts:
@doodler85authorJun 03.2010 — Hi optimus,

That locks it to the bottom of the screen regardless of the position of the content... I just want the footer to be below everything else.

Thanks!
Copy linkTweet thisAlerts:
@optimus203Jun 03.2010 — Ah, my bad. Have you tried just placing a <br clear="all"> before the footer div?
Copy linkTweet thisAlerts:
@doodler85authorJun 04.2010 — Yes! This works.

I never knew about this trick. Any other similar life-savers that you've run into with floats?

Thanks!
Copy linkTweet thisAlerts:
@repeater09Jun 06.2010 — DUDE!!! optimus u solved my problem also with that <br clear="all"> coding!! thanks my maincontent was overflowing past footer for watever reason because it was floated to i guess but that works thanks alot
Copy linkTweet thisAlerts:
@cbVisionJun 07.2010 — This method also works if you want to avoid extra markup.
[CODE]
<style type="text/css">
#footer {clear: both;}
</style>

<div id="footer">
<p>Footer info here</p>
</div>
[/CODE]
×

Success!

Help @doodler85 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.16,
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,
)...