divが相対位置/絶対位置で崩壊するのはなぜですか？

私は、浮動小数点演算（例：オーバーフロー：隠しで解決する）を使用するときにdivの内容が崩壊することに対処しましたが、絶対/相対位置を学習しようとしていて、コンテナ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