Page Widget How to - Float header and footer in place and hide overflows

Question

We would like to know how to float header and footer in place and hide overflows.
Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#main {<!--  ww w  .j a v a 2  s.c o  m-->
  width: 960px;
  height: auto;
  margin: 40px auto;
  overflow: hidden;
}

#main #hider {
  width: 960px;
  height: 40px;
  position: fixed;
  margin-top: -40px;
  background-color: white;
}

#main #banner {
  width: 960px;
  height: 100px;
  position: fixed;
  background-color: #EEE;
}

#main #mainMenu {
  width: 230px;
  height: auto;
  display: inline;
  float: left;
  position: fixed;
  top: 140px;
  background-color: #AAA;
}

#main #content {
  width: 720px;
  height: auto;
  display: inline;
  float: right;
  margin-top: 100px;
  max-height: 1000px;
}

#main #footer {
  width: 960px;
  height: auto;
  clear: both;
  position: fixed;
  bottom: 0;
  background-color: #CCC;
}
</style>

</head>
<body>
  <div id='main'>
    <div id="hider"></div>
    <div id='banner'>banner</div>
    <div id='mainMenu'>mainMenu</div>
    <div id='content'>Lorem ipsum dolor sit amet, consectetur
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      adipiscing <br/>elit. Integer <br/>feugiat <br/>felis <br/>eu <br/>dolor <br/>vehicula
      ligula fermentum consequat.</div>
    <div id='footer'>footer</div>
  </div>
</body>
</html>
The code above is rendered as follows: