CSS Sticky footer issue

Question

Possible Duplicate:
CSS sticky footer

I am trying to implement the CSS sticky footer but for some reason there is a margin between the footer and bottom of the following page:

The same thing happens here:

Any help would reall be appreciated

You should take a look at the solutions on http://stackoverflow.com/questions/1488565/how-to-stick-a-footer-to-bottom-in-css — James Khoury, Jul 22 '11 at 01:11
If the solutions from the question pointed by @James fixes the issue, I'd suggest to close this question as duplicate. — Denilson Sá Maia, Jul 22 '11 at 17:34
It is not a duplicate. The content I have is managed by a CMS meaning the content can expand below the fold of a page, in this instance the position absolute bottom wouldn't work. — Burt, Jul 22 '11 at 21:44

score 0 · Answer 1 · answered Jul 22 '11 at 01:02

0

#footer {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999999;
    /* No need for margin here */
}

This won't work on Internet Explorer older than 7. I'm not sure about the bugs in IE7, IE8 or newer.

answered Jul 22 '11 at 01:02

Denilson Sá Maia

1

`position: fixed` is not remotely the point of the sticky footer. -1 – Matt Ball Jul 22 '11 at 01:05
I also needed `width: 100%` when testing in chrome and ie8 and no need for `left` or `right`. – James Khoury Jul 22 '11 at 01:08
1

@Matt Whats the point of a sticky footer if not to stick on the page? – James Khoury Jul 22 '11 at 01:09
@James: You can set `left` and `right` and leave `width` as `auto`, as the browser will calculate the width based on the other properties. http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width (actually, setting `width: 100%` might get you in trouble if you have margin/padding/border, unless you also set `box-sizing`) – Denilson Sá Maia Jul 22 '11 at 02:38
@denilson From my testing in chrome: It would seem that `left/right` or `width` doesn't make any difference in this case. but it you don't put either it doesn't strech out. – James Khoury Jul 22 '11 at 04:44
2

@James this is the typical behavior implied by the phrase "CSS sticky footer:" http://www.cssstickyfooter.com/ – Matt Ball Jul 22 '11 at 14:02
@James: because `position: fixed` is not the typical "sticky footer." – Matt Ball Jul 23 '11 at 21:28
@MAtt he didn't ask for the typical sticky footer and specifically asked for non-`position: absolute` solution. And therefore this answer is still good. It works and does not have any real issues. – James Khoury Jul 24 '11 at 23:20

AlienWebguy · Answer 2 · 2011-07-22T01:09:40.027

0

You have margin-top:-60px; which is too much apparently. Bring that down to margin-top:-45px; or so

edited Jul 22 '11 at 01:09

answered Jul 22 '11 at 01:03

AlienWebguy

score 0 · Answer 3 · answered Jul 22 '11 at 01:28

0

Please give padding-bottom:20px for container ID. I think it will works

#container {
width: 940px;
margin: 0 auto;
text-align: left;
padding: 0px 0px 20px 0px;
}

answered Jul 22 '11 at 01:28

Mr.T.K

3 Answers3