View Full Version : absolute positioned div on bottom overlap

Nov 4th, 2009, 02:27 AM
Hi all,

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

.footer {
background:#f89820 url(images/top_right_or.png) top right no-repeat;

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.

Nov 4th, 2009, 02:45 AM
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

Nov 4th, 2009, 07:42 PM
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.

Nov 4th, 2009, 07:51 PM
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.