Search code examples
csspushfootersticky

Blank block above wrapper after push sticky footer

I finally got a sticky footer to work with a push div. Unfortunately, I now have a strange block above my wrapper that has shown up. I would like to get rid of this of course.

Site in question: http://print503.squarespace.com/gallery/

Basic HTML structure: 

    <body>
         <div id = "wrapper">
            [all content divs (dynamic/responsive)]
               <div class = "push">
               </div>
         </div>
         <div id = "footer"> 
         </div>
   </body>

Basic CSS Structure: 

html, body { 
height: 100%;
padding: 0;
margin: 0;
}

#wrapper {
position: relative;
margin: 0;
padding: 0;
min-height: 100%;
z-index: 1;
}

.push {
opacity: 0;
height: 50px;
bottom: 0;
}

#footer {
background-color: #000;
height: 200px;
bottom: 0;
}

So I'm overriding the template for this squarespace site with my own HTML and CSS. I think the wrapper (named "#outerWrapper") is a background image. I don't know if this is what is causing the problem with the block at the top that now appears.

I've done hours of research and cannot figure out this issue. Would love some help. Thanks in advance.

Solution

  • Adding

    #outerWrapper {
    display: inline-block;
}

    seems to fix it, if that's what you're going for (to get rid of the top black bar and have the background image show all the way to the top).