/    Sign up×
Community /Pin to ProfileBookmark

footer at bottom

Copy linkTweet thisAlerts:
Oct 18.2009

I have a design that has the footer of my design extending across the entire bottom of the page, so it is not inside my container for my content. I have it working so that the footer shows at the bottom of my browsers window, but my issue is that if I resize my browser to say 1024×768, my footer then goes overtop of my content because the container is longer that than the browser window, so you have to scroll, but my footer stays on top of the content. How can I get my footer to be at the bottom of my browser window OR at the bottom of my content, whichever is greater? I’ll try to illustrate this with the 2 attached screen shots. The first is on a large screen, the second is on a 1024×768 screen.

The site is only on my local computer, so I can’t really post a link to the site. I can, however, post any code.

Thanks!!

[upl-file uuid=6626d892-366f-4cef-ae2f-1d35bda9e2a3 size=100kB]homepage_large.jpg[/upl-file]

[upl-file uuid=9a39fecd-9f95-48b6-9261-4b26e28d9567 size=91kB]homepage_small.jpg[/upl-file]

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@ssystemsOct 18.2009 — if you haven't tried this yet.

#footer {

position:absolute;

bottom:0;

width:100%;

height:60px; /* Height of the footer */

}[/QUOTE]
Good Luck

Santos Systems
Copy linkTweet thisAlerts:
@jrthor2authorOct 18.2009 — that's what I have:
<i>
</i>.footer {background: url(../footer_grass_bg2.png) repeat-x left bottom #339999; position: absolute; width:100%; height: 42px !important; margin:0; padding:0; bottom: 0; left: 0;}


I think my issue is that the footer is not within any container, because I want it to be outside of the container so it will stretch across the whole bottom.
Copy linkTweet thisAlerts:
@cbVisionOct 19.2009 — Read this article for explanation in creating a footer at the bottom:

http://ryanfait.com/sticky-footer/
Copy linkTweet thisAlerts:
@jrthor2authorOct 20.2009 — yes, but that is not what I want since the footer there is inside the wrapper. My footer is not inside a wrapper. Here is a screenshot, and you'll be able to see the footer.

[upl-file uuid=54c49303-1f77-48e1-a388-65e0018c0602 size=84kB]homepage.jpg[/upl-file]
Copy linkTweet thisAlerts:
@coltks2004Oct 20.2009 — Try setting it as the background image for the body tag at the bottom of the page.

body {

background: url("http://whatever.com") bottom left no-repeat;

}
Copy linkTweet thisAlerts:
@jrthor2authorOct 20.2009 — I got it working using the link cbVision after looking at it second time.

Thanks!!
×

Success!

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