Jeremy Jeremy - 1 month ago 9
CSS Question

How to add padding at bottom of page

I have a website here

http://trentmcminn.com/

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%;
}

Answer Source

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;
}