Footer with bottom offset

 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Positioning Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style rel="stylesheet" type="text/css">
div#heading {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 80px;
  color: #ffffff;
  background-color: #666666;
  border: 1px solid #000000;
}

div#nav {
  position: fixed;
  top: 80px;
  left: 0px;
  width: 120px;
  background-color: #efefef;
  border: 1px solid #000000;
}

div#page {
  margin-left: 120px;
  margin-top: 80px;
  background-color: #ffffff;
  border: 1px solid #000000;
}

div#footer {
  position: fixed;
  bottom: 0px;
  left: 0px;
  background-color: #999999;
  width: 100%;
  height: 20px;
}

</style>
</head>

<body>
  <div id="heading"><h1>Masthead</h1></div>
  <div id="nav">
    Navigation item<br />
    Navigation item<br />
    Navigation item<br />
  </div>
  <div id="page"> 
    <h1>Heading One</h1>
    <p>This is paragraph one.</p>
  </div>
  <div id="footer">
    Footer
  </div>
</body>


</html>

Related examples in the same category

1.	Fixed footer
2.	Mark footer with DIV
3.	Set paragraph in footer
4.	Set footer to left clear
5.	Header, footer, side bar and content
6.	Footer: clear left
7.	3 column layout with equalising columns and footer
8.	Footer layout
9.	Table footer background and color
10.	footer border

Footer with bottom offset : footer « Layout « HTML / CSS

Related examples in the same category