/    Sign up×
Community /Pin to ProfileBookmark

Copyright footer div problem

Copy linkTweet thisAlerts:
Feb 16.2012

Hi,

I have a div section as a footer, which normally is postioned at the bottom of the browser. If the web page is longer than the browser height the footer doesnt move, it overwrites the text. However this:-

#copyright
{
font-size: 90%;
color: #606060;
text-align:center;
position:relative;
bottom: 12px;
right: 15px;
z-index:1;
}

Has fixed that. Now the problem is we dont want the copyright text half way up the page if the page is shorter than the browser, we want the copyright either along the bottom of the browser or if the web page is longer, at the bottom of the page.

Is this possible with css? or will i have to code it. If its code can anyone provide any pointers?

Cheers
Wadey.

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@nap0leonFeb 16.2012 — Try this - it places it at the bottom of your browser (effectively shrinking your viewable area by the height of the footer).
<i>
</i>#copyright
{
background-color: #34769a;
border-top: 1px solid #fff;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
text-align:center;
}
Copy linkTweet thisAlerts:
@cbVisionFeb 16.2012 — nap0leon,

I believe your technique would position the footer at the bottom of the browser even if the content is longer than the browser's window size.

I think you're looking for a "sticky footer." You can see one technique to achieve this here:

http://ryanfait.com/sticky-footer/
Copy linkTweet thisAlerts:
@holyhttpFeb 16.2012 — The trick would be to set the minimum height of the container of your page copy (preceding the footer) to about 98&#37; (of the end-user's viewport).
Copy linkTweet thisAlerts:
@nap0leonFeb 16.2012 — Yes, my technique puts it at the bottom of the browser window, regardless of how much page content there is.
×

Success!

Help @WadeyUK 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.3,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...