Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jan 2009
    Posts
    160
    Thanks
    40
    Thanked 1 Time in 1 Post

    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.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,680
    Thanks
    22
    Thanked 1,827 Times in 1,811 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, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    sackstein (11-04-2009)

  • #3
    Regular Coder
    Join Date
    Jan 2009
    Posts
    160
    Thanks
    40
    Thanked 1 Time in 1 Post
    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.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,680
    Thanks
    22
    Thanked 1,827 Times in 1,811 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, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    sackstein (11-10-2009)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •