position: absolute, div under div

Question

I've 3 divs, each of them has position: absolute.

First is header, and its working.

Header has constant height, and second div "content" also works.

Third div is "footer".

"Content" has changeable height and when "content" is higher than web-browser window the "footer" is ON "content". I want to "footer" under "content" irrespective of content height.

My header is 300px height, content has margin-top: 300px. I can't use the same for the footer, because content hasn't got constant height.

I don't want to set one div with position: absolute, and these 3 divs place inside this one.

div#header{
  width: 960px;
  height: 200px;
  left: 50%;
  margin-left: -480px;
  position: absolute;
 }

div#content{
 width: 960px;
 border: 1px solid black;
 left: 50%;
 margin-left: -480px;
 position: absolute;
 margin-top: 200px;
 }

div#footer{
  width: 960px;
  height: 30px;
  left: 50%;
  margin-left: -480px;
  position: absolute;
  bottom: 10px; /*with this i've div fixed to the bottom of web-browsers' window */
  clear: both;
  }

Answer 1

You're over positioning.

You do not need to position everything absolutely unless there's something you aren't sharing.

JSBin Example

Answer 2

If you are willing to use position : relative which is a tad better than position : absolute in cases like this, http://jsfiddle.net/vFTXg/1/ - Try editing the value of your content's height here and your footer will be automatically adjusted.

CSS

.header {
    position : relative;
    width : 100%;
    height : 90px;
    background-color : #000;
}
.content{
    position:relative;
    width : 100%;
    min-height : 200px;
    background-color : #f00;
}
.footer{
    position:relative;
    width : 100%;
    height : 50px;
    background-color : #0f0;
}

HTML

<div class='header'></div>
<div class='content'></div>
<div class='footer'></div>