My footer refuses to stay at the bottom of the content no matter what I've tried, from z-index to sticky footers.
Check out this link for more information
This is my CSS:
#footer {
position: absolute;
clear: both;
bottom:0;
width:100%;
height:105px; /* Height of the footer */
background:#eaebec;
background: linear-gradient(180deg, #eaebec, #7c7d7f);
/* position: relative;*/
z-index: 9999;
}
Here's a snippet of the HTML:
<!-- Footer -->
<div id="footer" class="panel-footer col-xs-12">
<div class="col-md-4"></div>
<div class="col-md-4">
<img id="subsBench-footer-img" src="images/Footer_Black_onTheBench_strapline_and_logo.png" alt="SubsBench Logo and Strapline">
</div>
<div class="col-md-4">
<img id="sm-icons" src="images/social_media_Icons.png" alt="Social Media icons">
</div>
</div><!-- /Footer -->
</div><!-- /container -->
And my CSS for the bootstrap panel-footer:
.panel-footer {
padding: 10px 15px;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}