Nick D. Nick D. - 3 months ago 16
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: http://tangotest.comoj.com

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
Answer

You could try increasing the padding of the page body.

Currently it is:

body {
background-image: url('http://tangoworldwide.net/Themes/Altier_2/images/tango/city01.jpg');
padding-top: 20px;
padding-bottom: 20px;

}

try changing the padding-bottom to

padding-bottom: 30px;
Comments