title: css div positioning for header content footer
body: <p>How should i style my content div and footer div so that:
  if my content is long then the content div will expend longer.
  the footer div will stick to the bottom of the div content.</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id=master&gt;
  &lt;div id=header&gt;
  &lt;div id=content&gt;
  &lt;div id=footer&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The following shows my css, but it doesn't work as how i want it to be.</p>
  
  <pre><code>body {
  background-color: #03C;
  margin: 0px;
  padding: 0px;
  height: 100%;
  }
  
  #master {
  width: 920px;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  position: relative;
  left: 0px;
  top: 0px;
  height: auto;
  }
  
  #header {
  position:absolute;
  width:920px;
  height:100px;
  z-index:1;
  top: 25px;
  left: 0px;
  background-color: #000099;
  font-size: 16px;
  text-transform: uppercase;
  font-style: normal;
  line-height: normal;
  font-weight: bolder;
  font-variant: normal;
  color: #FFF;
  text-align: center;
  margin: auto;
  }
  
  #content {
  position:absolute;
  width:920px;
  height:900px;
  z-index:2;
  left: 0px;
  top: 100px;
  background-color: #FFFFFF;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  line-height: 20px;
  /* [disabled]padding-left: 130px; */
  padding-top: 20px;
  text-align: center;
  }
  
  #footer {
  position:absolute;
  width:920px;
  height:30px;
  z-index:3;
  background-color: #000099;
  bottom: 0px;
  color: #FFF;
  left: 0px;
  top: 1000px;
  }  
  </code></pre>