CSS Sticky Footer

November 12, 2011 // In: CSS

Make a Footer Stick to the Bottom of a Page

There are several ways to stick footer at the bottom of the page. But I’ll show you very simple method to stick the footer at the bottom of the page.

We’ll create two files

  1. style.css
  2. mypage.html

style.css

body{
margin:0;
}
#footer{
position:fixed;
bottom:0px;
width:100%;
height:25px;
padding-top: 8px;
text-align: center;
background-color: #0E4878;
border-top: 1px #000000 solid;
  font-size: 12px;
font-family: arial, verdana;
color: #ffffff;
}

mypage.html

<html>
<head>
<title>CSS Sticky Footer By Sharp Coders</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div>
<p align="center" style="font-family:verdana; font-size: 22px; font-weight: bold; color:#933E0A;">
Main Body of the Page
</p>
</div>
<div id="footer">
&copy; Sharp Coders | sharp-coders.com
</div>
</body>
</html>

Preview

Create Rounded Corners with CSS