CSS Fixed Footer Support All Browser

Fixed footer can play important role of any website. We show our copyright text in footer and sometimes also show sponsor advertisement in footer section. If we make our footer fixed then visitors can see footer content while they scrolling page details. I’ve tested following snippet in all major web browsers including mobile browsers and it’s working great. So, today we are going to build a fixed footer with simple CSS code. I’ve also added demo URL in below.

– CSS Snippet For Fixed Footer:

body { 
  margin:0px; 
  padding:0px;
  background:#ccc;
  font-family:Verdana; 
  font-size:13px;
}	

footer#fixed-footer {
  color: black;
  border-top: 1px solid #000000;
  background-color: white;
  text-align: center;
  position:fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 20px;
  font-size:10px;
  text-align: center;
  line-height: 2em;
}
p{
  text-align: center; 
  color: #000000; 
  font-size: 18px;
}

– HTML Snippet For Fixed Footer:

<p>Resize your web browser to check footer position.</p>
<footer id="fixed-footer">
  Copyright &copy; http://www.demo.com 2012
</footer>

Enjoy! Was this information useful? What other tips would you like to read about in the future? Share your comments, feedback and experiences with us by commenting below!