爲什麼div相對/絕對定位崩潰？

我使用浮點定位（例如用overflow：hidden解決問題）時，處理了divs在其內容上崩潰的問題，但我試圖學習絕對/相對定位，並且無法弄清楚爲什麼container div崩潰。我的測試案例：爲什麼div相對/絕對定位崩潰？

<html> 
    <head> 
    <style type="text/css"> 
     body { 
     background-color:#eee; 
     } 

     #content { 
     margin:0 auto; 
     position:relative; 
     border:1px solid red; 
     width:800px; 
     display:block; 
     background-color:white; 
     } 

     #header { 
     border:1px solid black; 
     background-color:#777; 
     color:white; 
     width:800px; 
     position:absolute; 
     left:0; 
     top:0; 
     } 

     #leftcol { 
     position:absolute; 
     border:1px solid black; 
     background-color:#ddd; 
     width:200px; 
     top:100px; 
     left:0; 
     } 

     #rightcol { 
     position:absolute; 
     top:100px; 
     left:205px; 
     border:1px solid black; 
     background-color:#ddd; 
     width:500px; 
     } 

    </style> 
    <title>CSS Positioning Example 1</title> 
    </head> 

    <body> 
    <div id="content"> 

     <div id="header"> 
     <h1>The Awesome Website</h1> 
     </div> 

     <div id="leftcol"> 
     <h2>About</h2> 
     <p> 
     This website is so awesome because it was made by someone 
     and that is really all there is to it. There. 
     </p> 
     </div> 

     <div id="rightcol"> 
     <p>This is where I'm going to put some real body text so that it goes 
     on and on for a while and so I can get a sense of what happens when 
     the text in the paragraph keeps going and the box containing it keeps 
     going on as well. 
     </p> 
     </div> 

    </div> 

    </body> 
</html>

這是怎麼回事？爲什麼紅色邊框的內容div即使包含其他div也會崩潰？

來源

2011-09-20 mix

JSBin：http://jsbin.com/exukoc – Mohsen