Nick D. Nick D. - 2 months ago 4x
CSS Question

CSS Sticky Bar Overlapping

I am using the Sticky Footer code from HERE and for some reason the sticky footer overlaps my .content class on my site.

My site:

As you can see the 910x50px image at the bottom overlaps the white box when you scroll to the bottom on any given page.

I need the 910x50px image to be at the bottom of the white box when you scroll to the bottom.

CSS for the white box .content class

.content {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
margin: auto;
width: 50%;
background: white;

CSS for the Sticky Footer .player class

.player {
position: fixed;
left: 470px;
bottom: 0px;
height: 50px;
width: 50%;
background: transparent;

Arc Arc

You could try increasing the padding of the page body.

Currently it is:

body {
background-image: url('');
padding-top: 20px;
padding-bottom: 20px;


try changing the padding-bottom to

padding-bottom: 30px;