WordPress.org

Ready to get started?Download WordPress

Forums

CSS Troubles - Sticky Footer (9 posts)

  1. jordanjustkidding
    Member
    Posted 4 years ago #

    Hey guys,

    I'm trying to get my footer to stick to the bottom of the browser window regardless of how much content on the page there is. I've been reading this: http://www.xs4all.nl/~peterned/examples/csslayout1.html - and following the stylesheet, but something just isn't working, not sure what I'm doing wrong. Could any css experts help me out?

    My problem is simply getting the content to push the footer down when it exceeds the browser window. Currently the footer just stays where it is and the content moves over the top: http://www.museumofmodernlife.com/index/

    Any ideas? A huge thanks in advance for this - it's driving me mad!

    Jordan

  2. gerbilk
    Member
    Posted 4 years ago #

  3. jordanjustkidding
    Member
    Posted 4 years ago #

    Thanks gerbilk - I'm trying to follow this but still can't get it to work.

    I've got push div in my template and I think I have all the margins and height properties set - still no change to my footer though. Can anyone help?

    Here are the styles for body, container, footer and push:

    body {
    background: #FFF;
    height:100%;
    }
    
    .container {
    background:none;
    margin:0 auto -142px;
    padding:100px 0 0 0;
    width:100%;
    min-height:100%;
    height:auto !important;
    height:100%;
    }
    
    #footer-wrap {
    width:100%;
    height:142px;
    background:#E1E1D6 url('../35mm/images/diagonal.png') repeat-x;
    background-position:left top;
    padding: 2em 0 3em;
    overflow:hidden;
    }
    
    .push {
    height:142px;
    }

    Thanks again.

    Jordan

  4. gerbilk
    Member
    Posted 4 years ago #

    the #footer-wrap css should instead be applied to the .container which is the equivalent of .wrapper in the example on the link i posted

  5. jordanjustkidding
    Member
    Posted 4 years ago #

    Sorry gerblik, that's really confused me. I've applied the .wrapper css (in your example) to my .container - and the .footer css to my #footer wrap.

    If I apply the .footer css to my .container... what then do I apply the .container (.wrapper) css to?

  6. gerbilk
    Member
    Posted 4 years ago #

    Should look more like this, you've added a footer-wrap around your foot, instead the wrapper refers to everything above your footer. The push div should be in the main .container (not sure it makes a difference, better to be clear though).

    * {
     margin: 0;
     }
     html, body {
      height: 100%;
      }
      .container{
      min-height: 100%;
     height: auto !important;
     height: 100%;
     margin: 0 auto -142px;
     }
       #footer-wrap, .push {
    height: 142px; clear: both;
     }
  7. jordanjustkidding
    Member
    Posted 4 years ago #

    Incredible. Thank you gerbilk - you've been a huge help. This is great!

    One last question - when there is not much content my footer appears below the bottom of the browser window, instead of sticking to the bottom of the browser window (http://www.museumofmodernlife.com/index). I tried searching for this and someone mentioned removing padding from container should do it but to no avail. Adjusting the margins doesn't work either. Any idea what I need to do to bring the footer up?

    Thanks again gerbilk. Very kind.

  8. gerbilk
    Member
    Posted 4 years ago #

    hi it's partly the margin-top 150px you have applied to .container , you need to find another way to do this, maybe add an empty div inside container with a height of 150px top be hidden under your fixed div. After that it's inconsistencies with vertical padding and height, I set footer-wrap to 138px and .container bottom margin to 163px and that works fine. You need to account for the padding when setting these values. Add a css reset to make this easier (I usually use the one from 960 grid system then adapt it to my needs).

  9. gerbilk
    Member
    Posted 4 years ago #

    and install firebug and right click, inspect element if you haven't already

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags