Check out my code below:
<footer>
<div id="footer">
<div class="footer-column" id="footer_column1">
<nav class="footer-link">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
</div>
<div class="footer-column" id="footer_column2">
<nav class="footer-link">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
</div>
<div class="footer-column" id="footer_column3">
<nav class="footer-link">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav></div>
<div class="footer-column" id="footer_column4">
<nav class="footer-link">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
</div>
</div>
</footer>
I have successfully implemented a sticky footer using HTML5 and CSS.
The CSS for the footer is as follows:
#footer {
position:absolute;
clear:both;
bottom:0;
color:#000;
width:100%;
height: 100px;
background:#fff;
margin-top:100px;
left:0;
}
.footer-column {
float: left; /* Push the div as far up-left as it can be put */
width: 25%; /* Make sure to subtract the padding */
padding: 10px; /* We want padding on all sides to make things look nice */
text-align:center;
}
.footer-column .footer-link ul li
{
list-style-type:none;
display:block;
}
In addition, use the following CSS for wrapping: #wrap{width:100%;}. You can preview the updated page layout here.
If you're experiencing issues with setting the correct height for your sticky footer, feel free to ask for assistance!