I'm facing an issue where my sticky footer doesn't stick to the bottom when there's a floating element in my content. Instead, it sits at the end of the non-floated content.
My goal is to have the footer at the bottom of the page window if the content doesn't fill the entire page, and at the bottom of the content when it exceeds a single page height.
Below is the code I'm using:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8>
<link rel="stylesheet" type="text/css" href="sticky.css"/>
<title>Sticky Footer Test</title>
</head>
<body>
<nav>
<div id="wrap">
<p class="navbargreen">Green Navigation Bar</p>
</div>
</nav>
<main>
<div id="wrap">
<p class="redtext">Lorem ipsum</p>
<div id="box1">Floater 1</div>
</div>
</main>
<footer>footer</footer>
</body>
</html>
CSS:
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
main {
position: relative;
min-height: 100%;
}
#wrap {
margin: 0 auto;
width: 960px;
height: auto;
min-height: 100%;
padding: 0;
background-color: yellow;
}
.navbargreen {
height: 30px;
width: 960px;
background-color: greenyellow;
}
.redtext {
background-color: red;
height: 3000px;
}
#box1 {
float: left;
height: 400px;
width: 300px;
background-color: orange;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background-color: purple;
}
I've been struggling with this issue for a while now!
I've searched, experimented, and tried various solutions with this test page, but I just can't seem to figure it out. It's frustrating!
I have a feeling that it's related to the floating elements, but I can't seem to crack it!