Problem with CSS Sticky Footer implementation

Question

Im having some problems getting the Sticky Footer to work on my site. If the content is smaller than the window the footer should stay at the bottom of the window and the de

Answer 1

Instead of modifying your existing styles (or using CSS Sticky Footer), its a lot easier for me to just redo it. So here goes:

    
Oh Beautiful Header
    
Lots of Content

Stay Put Little Footer

Basically the negative margin should match the height of the footer, height 100% needs to be applied to html/body, and the position relative should be declared.

Also in reference to the xHTML, notice how the "footer" div is not INSIDE the "container" div, but rather, outside of it (so that there are 2 separate container-like divs, container and the footer).

If your still having trouble, the main problems with your markup IS:

• 100% height needs to be declared for html and body tag.
• negative margin is missing on the container div which is the #banner-bg
• if footer is 100px tall, #banner-bg should have margin-bottom: -100px

• position needs to be relative on both #banner-bg and the #footer

  html { height: 100%;}

  body { 
      color:                      #00FFFF;
      background-image:   url("Images/img.gif");
      font-size:                  1em;
      font-weight:        normal;
      font-family:        verdana;
      text-align:                 center;
      padding:                    0;
      margin:                     0;
      height: 100%;
  }
  
  #banner-bg {
      width:                      100%;
      height:                     100%;
      background-image:   url("Images/img2.gif"); background-repeat: repeat-x;
      position: relative;
      margin: 0 0 -200px 0;
  }
  
  #wrapper {
      width:                      84em;
      margin-left:        auto; 
      margin-right:       auto;
  }
  
  #header-bg {
      height:                     16em;
      background-image:   url("Images/header/header-bg.png"); 
  }
  
  #content-bg {
          background-image:       url("Images/img3.png"); background-repeat: repeat-y;
  }
  
  #content {
      margin-right:       2em; 
      margin-left:        2em;
  }
  #footer {
      position: relative;
      height: 200px;  
  }
  

and the rest:

    
          

            

              

                
              
 
              

                

                  
                
 
              
 
            
 
          
 
          

          Footer Content