absolute positioned div on bottom overlap

Hi all,

I have a div positionied at the bottom of the screen by using absolute positioning:

.footer {
width:95%;
height:60px;
position:absolute;
margin-top:25px;
bottom:0px;
float:left;
background:#f89820 url(images/top_right_or.png) top right no-repeat;
min-width:500px;
}


this works well until someone has a small screen and that bar moves up and overlaps my content. How can I make the div stop at a certain point on smaller screens so that the page becomes scrollable instead? Thanks for any help.

Hello sackstein,
You've seen why an ap footer is not a viable full height solution. Have a look at my example page of a better way to do it at http://nopeople.com/CSS/full-height-layout/index.html

Thank you for your reply.

Can you maybe shed some light on how it works though so that I can recreate this in the future?

From my understanding it requires a wrapper div for the entire content and once you close that div the footer div must come after it? The wrapper margin also has a negative value for the height of the footer so that it is always x amount higher and won't overlap the footer?

Am I getting that right? I think the margin was the main confusing part to me.

Yes, that's almost it. You left out the most important part though, the #push that overcomes the #footer's negative margin when it's not needed.