Page Widget How to - Make nested footer sticky to the bottom

Question

We would like to know how to make nested footer sticky to the bottom.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#container {<!--   w w  w.  j  av  a 2 s.c o m-->
  background: #DDD;
  min-height: 100%;
  height: 100%;
  margin: 0 auto -60px;
  overflow: hidden;
  width: 960px;
  z-index: 10;
}

#logo {
  height: 114px;
  width: 960px;
}

#logo a {
  border: none;
  display: block;
  height: 90px;
  margin: 60px auto;
  width: 640px;
}

#menu {
  background-color: #EEE;
}

#border-left {
  background: blue;
  height: 100%;
  margin: -4px auto 0;
  width: 912px;
}

#border-right {
  background: blue ;
  height: 100%;
}

#content {
  background: yellow;
  margin: 35px auto 0;
  min-height: 100px;
  padding: 8px 33px 110px;
  width: 738px;
  z-index: 10;
}

#push {
  height: 60px;
}

#wrapper {
  width: 960px;
  margin: o auto;
}

#footer {
  height: 60px;
  margin: 0 auto;
  clear: both;
  background: #AAA ;
  width: 808px;
}
</style>
</head>
<body>
<body>
  <div id="background">
    <div id="container">
      <div id="header">
        <div id="logo"></div>
        <div id="menu">
          <p>Menu</p>
        </div>
      </div>
      <div id="wrapper">
        <div id="border-left">
          <div id="border-right">
            <div id="content">
              <p>Page Content</p>
            </div>
          </div>
        </div>
        <div id="push"></div>
      </div>
    </div>
    <div id="footer">
      <p>Footer</p>
    </div>
  </div>
</body>
</body>
</html>

The code above is rendered as follows: