Positioning Footer

[Matrixster]

Im sort of new to css but wouldnt consider myself a newbie...

I am trying to position my footer so you can only see it if the user scrolls down.

Here's an example of what I have now:

#content {
position:absolute;
top:200px;
}

#footer {
position:absolute;
bottom:-80px;
}

The problem is the content runs over the footer in some of my longer content pages. How can I position the footer?

[Harvs]

Matrixster,

You may be able to clear to footer so that it will only display when it is clear of every other element ie:

#footer {clear:both}

Alternatively you may be able to add padding to the bottom of the content ir:

#content {padding-bottom:80px}

Let me know how ya go
-Harvs-

[Matrixster]

neither of those seemed to work....

[Don_Hoagie]

Harvs and Matrixster-

Am I wrong in my recollection that you can't just plug in
#footer {clear:both} without changing its position attribute, which is currently 'absolute'? The absolute positioning of the element will override its attempts to clear any other content.

I believe that floating your #content and then using the 'clear' attribute on the #footer will work, as long as you don't have either of them absolutely positioned. I've been wrong before though. I've also been passed out while people spread hot tuna all over my back before... but that's beside the point.

[Matrixster]

ok, I got rid of absolute positioning and I added the following to my content

padding-bottom:25%

and then used

clear:both

on the footer

Is it ok, browser wise to list padding as a %?