absolute positioned div on bottom overlap

sackstein · 11-04-2009, 02:27 AM

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.

Excavator · 11-04-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

sackstein · 11-04-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.

Excavator · 11-04-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.

11-04-2009, 02:27 AM	PM User \| #1
sackstein New Coder Join Date: Jan 2009 Posts: 70 Thanks: 16 Thanked 0 Times in 0 Posts	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.

11-04-2009, 02:45 AM	PM User \| #2
Excavator Senior Coder Join Date: Dec 2006 Location: Alaska Posts: 3,573 Thanks: 9 Thanked 460 Times in 454 Posts	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 __________________ Validate often DURING development - Use it like a splelchecker \| Debug during Development \|Write it for FireFox, then hack it for IE Use the right DocType \| Validate your markup \| Validate your CSS \| Why validating is good \| Why tables are bad

11-04-2009, 07:51 PM	PM User \| #4
Excavator Senior Coder Join Date: Dec 2006 Location: Alaska Posts: 3,573 Thanks: 9 Thanked 460 Times in 454 Posts	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. __________________ Validate often DURING development - Use it like a splelchecker \| Debug during Development \|Write it for FireFox, then hack it for IE Use the right DocType \| Validate your markup \| Validate your CSS \| Why validating is good \| Why tables are bad

Thread Tools
Show Printable Version Email this Page
Rate This Thread
Rate This Thread:

11-04-2009, 07:42 PM	PM User \| #3
sackstein New Coder Join Date: Jan 2009 Posts: 70 Thanks: 16 Thanked 0 Times in 0 Posts	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.