CODEWITHSUNDEEP
htmlcss
Dave
Dave

Reputation: 6179

Why is there extra space on the bottom of page?

I'm trying to make a sticky footer for a site I'm working on and I can't get rid of an extra white space at the bottom. I see it in Chrome and Safari (I haven't tested other browsers yet). When the page first loads, you don't see it, but if you scroll down there is about 2-3px of just white space. How to I make it so that my footer sticks to the bottom?

This is the site:

http://ec2-23-23-22-128.compute-1.amazonaws.com/

And this is what I'm trying to accomplish:

How do I get rid of the extra white space at the bottom of the page?

NOTE: I know there are a couple of other rendering issues, but the only one I'm worried about right now is the extra pixles on the bottom of the page. I've been playing with negative margins, 0 margins, paddings, etc all day and I'm not getting anywhere with it :/

Upvotes: 0

Views: 5176

Answers (1)

user463231
user463231

Reputation:

It disappears when you give the image in the div with class "img-wrapper" display: block. This is common with images, I see you are doing this for a css reset:

* {
  margin: 0px;
}

I would suggest against this. A proper css reset or normalize would go a long way to easing these kind of headaches.

Edit: I know you said it's a work in progress, but just as a heads up if you haven't noticed the window also scrolls when you don't need it to. This is the issue:

#b-container {
  background-color: #F1EFE6;
  min-height: 100%;
    height: auto !important;
    height: 100%;
  margin: 0 auto -170px; // originally this was 0 auto -150px
}

Upvotes: 1

Related Questions