How to add padding at bottom of page

Question

I have a website here

For some reason the bottom of the page (the word Barney) is slightly cutoff by the fixed position footer. I am trying to add padding to the bottom of the body by this but it is not doing what I am trying. I am not sure what is going on. ANy help would be appreciated.

body {
padding-bottom: 100px;
height: 100%;
}

Side note: regarding the layout of your site, you may want to look at this http://stackoverflow.com/questions/1726073/is-it-sometimes-bad-to-use-br — Dom, Sep 09 '13 at 02:11

score 1 · Accepted Answer · answered Sep 09 '13 at 02:05

1

This happens because the absolutely positioned footer is overlapping with column layout. You could either reduce the size of the columns and give them a negative bottom margin, or apply a padding to the columns like for example:

div#grid.col-4 div.column {
    width: 25%;
    padding-bottom: 10px;
}

answered Sep 09 '13 at 02:05

Pankrates

3,074
1
22
28

i think you should mark it correct, if you are satisfied with the answer :) – user1525612 Sep 09 '13 at 02:40

score 1 · Answer 2 · answered Aug 24 '17 at 09:29

1

html{ padding-bottom: 25px;}

This pads 25 pixels to the bottom of every page that uses the css that includes this tag. All pages should have tags enclosing the content. This is a better option then body because dynamic content and floating divs may not give the desired effect within the body. It also is handy in that it will give you a constant padding effect on all pages within the site.

answered Aug 24 '17 at 09:29

Mark Affleck

11
2

(Welcome to SO! Make "code"-parts like `div`s stand out enclosing them in `\`"back-ticks"\``. Then, it should be "…option *than* `body`…".) Care to explain choosing padding over margin? – greybeard Aug 24 '17 at 09:53

score 0 · Answer 3 · answered Sep 09 '13 at 02:07

0

Increase the margin of you div#grid.albums div.item from 30px to 50px, for example. That will solve your problem.

answered Sep 09 '13 at 02:07

DanielX2010

1,897
1
24
26

Thanks, It works, but I dont want to change the margin between the items. Thought there would be a simple way to add padding to the bottom of . I have done it before, just not sure why on this site its not working – Jeremy Sep 09 '13 at 02:09

score 0 · Answer 4 · answered Sep 09 '13 at 02:11

0

Update following style rule:

div#grid.albums div.item {
    margin-bottom: 30px;
    margin-right: 30px;
    padding-bottom: 1px;
}

answered Sep 09 '13 at 02:11

Rameez

1,712
2
18
39

How to add padding at bottom of page

4 Answers4