Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Footer won't stay at bottom of browser window

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #193531
    Russell
    Participant

    Hello:

    I’ve got a site here:
    http://testing003.compoundeyedesign.com/contact-us.html

    I can’t get the footer div to stay fixed to the bottom of the browser window. If you scroll down, the footer bar will move upwards. If you can’t recreate it, it looks like this:
    http://note.io/1yx7njq

    The relevant CSS is:

    .footer {
    font-size: .8em;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding-top:10px;
    padding-bottom:10px;
    background-color: #f5f5f5;
    }

    Any ideas why this might not be working properly? Thanks in advance.

    Kind regards, Russell

    #193532
    Alen
    Participant

    @hrachovec

    You need to set parent element to position: relative;. So:

    body {
      position: relative;
    }
    
    #193533
    Shikkediel
    Participant

    Or lose the positioning altogether (nothing after it)… but if you want it to stay at the bottom of the screen it would have to be position: fixed.

    #193775
    Russell
    Participant

    Hi Shikkediel and Alen:

    Thanks for your feedback. I tried both suggestions and it appeared that Shikkediel’s recommendation of adding position: fixed to the .footer class did the trick.

    Thanks for your help.

    Cheers, R

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.