Footer overlapping content on low res canvas

Question

I'm having trouble with a footer I can't make stick to the bottom of the page. It's probably just a line I forgot, I've done this multiple times in the past, so I'm sure it's just a silly mistake. I've cleaned up the page so it's easier for you to tell me what I'm forgetting. It works fine when content doesn't pass it, remove some <br />s in the content code and you'll see it does the job of staying at the bottom.

http://jsfiddle.net/MS4KJ/

#footer{
    position:absolute; 
    bottom:0px;
    width:100%;
    background-color:#aaa;
    color:#fff;
    text-align:center;
    height: 100px;
    left:0px;
}

Thanks!

so this is correct. Why are you using too much
. When you will place the contents then no need to place the
. — Code Lღver, Feb 21 '13 at 12:35
look at this tread http://stackoverflow.com/questions/616290/making-a-css-footer-either-sit-at-the-bottom-of-the-browser-window-or-bottom-of — freshbm, Feb 21 '13 at 12:37
Oh, I know, I only did that to simulate loads of content on this blank page. — Henrique P., Feb 21 '13 at 12:37

score 0 · Answer 1 · answered Feb 21 '13 at 12:28

0

Change it to:

#footer{
    position: relative; 
    bottom:0px;
    width:100%;
    background-color:#aaa;
    color:#fff;
    text-align:center;
    height: 100px;
    left:0px;
}

Else, select the maximum height and give a min-height for the #content.

#content {min-height: 350px;}

answered Feb 21 '13 at 12:28

Praveen Kumar Purushothaman

164,888
24
203
252

Thanks, but why do I have blank spaces between the footer and the canvas' borders now? – Henrique P. Feb 21 '13 at 12:33
You didn't want it to be sticky right, then this is the only way. – Praveen Kumar Purushothaman Feb 21 '13 at 12:34
What you mean is I can't get rid of these (http://i.imgur.com/JRstQNv.png) white spaces if I use a relative position? – Henrique P. Feb 21 '13 at 12:42
Oh the whitespaces on the top huh? Dude, easy... Give a `margin-top: -10px`. – Praveen Kumar Purushothaman Feb 21 '13 at 12:44
Not really, on the left and right and bottom. Although if I do `margin:-10px;` it fixes all but the right margin. – Henrique P. Feb 21 '13 at 12:46
Do this: `margin: -10px 0;` – Praveen Kumar Purushothaman Feb 21 '13 at 12:48
Fixes bottom, makes left and right still have the space. – Henrique P. Feb 21 '13 at 12:49
Remove that zero. Make `margin: -10px`. – Praveen Kumar Purushothaman Feb 21 '13 at 12:50
Like I said, it fixes all but the right margin. `margin-right:-10px;` also does nothing. – Henrique P. Feb 21 '13 at 12:52
Give adding more width. Say, kinda `width: 110%`? – Praveen Kumar Purushothaman Feb 21 '13 at 13:02
See this is fixed in teh fiddle: http://jsfiddle.net/MS4KJ/1/ – Praveen Kumar Purushothaman Feb 21 '13 at 13:03
1

Try set body padding to 0px and footer margin to 0px and also remove footer left: 0px – freshbm Feb 21 '13 at 13:18
@PraveenKumar, I'm pretty sure that would make my page scroll. Anyway, freshbm's margin:0 fix worked. Thanks for all the help, though. And for fixing my OP. – Henrique P. Feb 21 '13 at 15:54

score 0 · Accepted Answer · edited May 23 '17 at 12:27

0

You should use:

position: relative;

or if you want sticky footer look at this tread: Making a CSS footer either sit at the bottom of the browser window or bottom of content

and this site: http://ryanfait.com/sticky-footer/

Edit:

Try set body padding to 0px and footer margin to 0px and also remove footer left: 0px. That sholud remove white spaces around footer. Take look at this: http://meyerweb.com/eric/tools/css/reset/

edited May 23 '17 at 12:27

Community

1
1

answered Feb 21 '13 at 12:33

freshbm

5,540
5
46
75

Thanks, yeah, I get now that the position has to be relative. What I can't do is make it full width when I set it to that, I always get part of the canvas to the left, bottom and right when I do that. – Henrique P. Feb 21 '13 at 12:44
Try set body padding to 0px – freshbm Feb 21 '13 at 13:08
Thanks. It was actually the margin:0 that was missing in body that fixed it. – Henrique P. Feb 21 '13 at 15:52

Footer overlapping content on low res canvas

2 Answers2