I am working on a new page with a static header, two content columns, and a sticky footer. Everything is working of except that my footer keeps rolling under my content. I’d appreciate any help that can be given to get it to stop going under my content.
I tried the suggestions found in to no avail:
Content going under footer in Google Chrome and not FF
Content scrolling on mobile page with fixed header/footer
Placing footer under content doesn't seem to work
Why is my footer not going to the bottom of the page?
CSS:
body, html {
height: 99%;
}
#page {
position: relative;
margin-bottom: -100px;
margin-left: auto;
margin-right: auto;
margin-top: 0;
height: 100%;
min-height: 100%;
}
#header {
clear: both;
float: none;
min-width: 0px;
margin-right: 0px;
margin-left: -9px;
margin-bottom: 0px;
margin-top: -9px;
z-index: 1;
position: fixed;
height: 150px;
width: 100%;
background-color: #fff517;
}
#wrapper {
margin-bottom: 100px;
float: none;
clear: both;
position: absolute;
margin-top: 170px;
left: 50%;
width: 854px;
margin-left: -422px;
}
#left-sidebar {
clear: none;
margin-left: auto;
margin-bottom: auto;
margin-right: 50px;
margin-top: auto;
min-height: 300px;
width: 200px;
float: left;
background-color: #39ff32;
position: relative;
}
#content {
clear: none;
float: left;
min-height: 300px;
width: 600px;
background-color: #ff1c23;
position: relative;
}
.push {
clear: both;
height: 200px;
}
#footer {
clear: both;
padding-top: 50px;
background-color: #9f49ff;
text-align: center;
width: 100%;
height: 50px;
z-index: 0;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html>
<head>
<base href="http://www.footballpickpool.com/new_fpp/"/>
<link type="text/css" href="./resources/css/style.css" rel="stylesheet"/>
</head>
<body>
<div id="page">
<div id="header">
</div>
<div id="wrapper">
<div id="left-sidebar">
</div>
<div id="content">
</div>
</div>
<div class="push"></div>
</div>
<div id="footer">
</div>
</body>
</html>
Fiddle: http://jsfiddle.net/aUTqf/
Thanks in advance to anyone who can provide some insight.
Edit:
I now have it working as expected in every browser but IE. Issue was due to fixed positioning of a couple of elements. Now to figure out IE, code included below:
body, html {
background-position: 50% 80%;
background-repeat: no-repeat;
background-image: url(../images/background.jpg);
background-color: #d9d9d9;
height: 99%;
margin: 0px;
padding: 0px;
}
#header {
padding-top: 15px;
margin-left: auto;
margin-bottom: 45px;
margin-right: auto;
margin-top: 0px;
color: white;
position: fixed;
z-index: 99998;
left: 0;
top: 0;
height: 150px;
width: 100%;
background-color: #fff517;
}
#wrapper {
float: left;
clear: both;
position: relative;
left: 50%;
width: 854px;
margin-left: -422px;
padding-top: 200px;
padding-bottom: 150px;
}
#left-sidebar {
clear: none;
margin-left: auto;
margin-bottom: auto;
margin-right: 50px;
margin-top: auto;
min-height: 300px;
width: 200px;
float: left;
background-color: #39ff32;
position: relative;
}
#content {
min-height: 300px;
clear: none;
float: left;
width: 600px;
background-color: #ff1c23;
}
.push {
clear: both;
height: 100px;
background-color: #9f49ff;
}
#page {
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
height: 100%;
min-height: 100%;
width: 100%;
z-index: 1;
}
#footer {
clear: both;
margin-top: auto;
margin-left: auto;
margin-bottom: auto;
margin-right: auto;
background-color: #9f49ff;
text-align: center;
width: 100%;
height: 50px;
z-index: 0;
}
I believe this is a true Sticky Footer as you wanted.
http://jsfiddle.net/PU8U3/
I had to remove a lot of stuff from your CSS. I tried to leave only the necessary to make it work. You should try to add what you need on top of this.
Watch out for the stylesheet link tag in your HTML, it’s really hard to edit CSS using JSFiddle while the HTML is loading another.