CSS: Absolute Footer Problemo - Help?

RandomTom · 19 Aug 2006 at 20:21

I wouldn't usually ask but I know that this question has been asked before, albeit eons ago, I'm having a bit of trouble at the moment as in where whenever the content is too long it underlaps through the footer which on short length pages is placed on the 'bottom', shown below:

Code:

body {
	margin: 0 auto;
	padding: 0;
	background: #fff url("img/bg.jpg") repeat-x;
	font:  0.9em tahoma, verdana, arial, sans-serif;
	color: #333;
}

#content {
	padding-top: 1em;
}

#footer {
	position: absolute;
	bottom: 0;
	height: 80px;
	width: 100%;
}

That's what I have for the individual divs, what positioning would I have to add onto their, anything to do with 100% heights or anything, I've got myself a bit stuck, thanks to anyone who can help.

RandomTom · 19 Aug 2006 at 21:10

http://www.twobeds.com/upload/userfiles/RandomTom/garfitts/index.html

there's a link - i've not done any navigation or link styles yet, it's just barebones layout, but i'll try clear: both now.

RandomTom · 19 Aug 2006 at 21:32

iCraig said:
Remove

position: absolute;
bottom: 0;

from #footer.

ja, and now how shall I get it to 'stick' to the bottom?

RandomTom · 19 Aug 2006 at 22:11

iCraig said:
It is in Firefox for me. Once you've scrolled down..

Or do you mean visibly at the bottom in any resolution?

Any res at the bottom yeh, pn the long pages it's at the bottom yeh but on the short pages I'd like it pushed to the bottom, hence the "bottom: 0;" but I can't remember how to irradicate the problem by use of positions etc.

RandomTom · 20 Aug 2006 at 11:43

Lol, I might bail out of this in a sense and on "long" pages use a div called "footer2" using the exact same properties except not using:

Code:

#footer {
	position: absolute;
	bottom: 0;

As seen as the page is longer, it will just hit the bottom anyway, haha. Only problem is that at different resolutions this will b0rk so hmph