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.

toString · 19 Aug 2006 at 20:58

clear:both; on the content div?

Worked for me in the past, at least

iCraig · 19 Aug 2006 at 20:59

Hi Tom, can you post the URL of the site. That way I can try a few things with the CSS to find out for you, instead of going back and fourth with little bits of code for you to try.

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.

iCraig · 19 Aug 2006 at 21:20

Remove

position: absolute;
bottom: 0;

from #footer.

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?

iCraig · 19 Aug 2006 at 21:37

It is in Firefox for me. :confused:

Once you've scrolled down..

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

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.

iCraig · 19 Aug 2006 at 22:48

How about placing a spacer DIV with a static height and 100% width between the content an the footer? Make sure the content has no height specified and is allowed to wrap.

joeyjojo · 19 Aug 2006 at 23:47

This might work:
http://alistapart.com/articles/footers

Old article, but may be relevant. Absolutely position, relative to the container, the footer at the bottom. Then make the container have min height 100%. Works fine for proper browsers but IE has a fit, so add some hacks.

Footers are a pain

Edit http://solardreamstudios.com/learn/css/footerstick

punky_munky · 20 Aug 2006 at 01:03

I'm confused.

What's wrong with having it clear:left and position:relative? :confused:

Did you want it fixed there?

tsinc80697 · 20 Aug 2006 at 11:39

This is the exact same problem i had last week, if you scroll down the footer doesn't move with the page, but if you drag the page longer then the footer moves with the bottom of it.

I ended up jackin it in and changing how my page works, but if you do figure this out lemmie know

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

tsinc80697 · 20 Aug 2006 at 12:39

Yeah good plan

I'm yet to sort my site out properly, all ive got is the template as a single image, and the image links placed.
Needs a lot of work, but with footers messing me about its really not nice :*(