Fix and center align the footer at the bottom of a page with css

It's easy to fix a div element at the bottom of a page with CSS.
Sticky bottom div

The above figure shows a fixed footer at the bottom of a page. To do this, please add the following html code to your header or  footer file.

<div id="fixedfooter">
<div class="inner">Sticky Bottom DIV element</div>
</div>

Pleae add the following CSS snippet.

#fixedfooter {
position:fixed;
left:0px;
bottom:0px;
width: 100%;
text-align: center;
}
.inner {
background:#1E299D;
color: white;
width: 200px;
padding: 15px;
display: inline-block;
}


Leave a Comment