Почему моя страница прерывается в стандартном режиме?

Моя страница совершенна с доктриной и ломается ужасно, когда она применяется. (Более конкретно, он ломается с любым типом HTML4. HTML3 работает отлично, но это явно неприемлемо.)Почему моя страница прерывается в стандартном режиме?

Как обычно, я сократил страницу до минимально необходимого для демонстрации проблемы, но основная проблема остается.

Без DOCTYPE, желательно: desired

С DOCTYPE, ужасно сломаны: enter image description here

И код, конечно. Добавьте doctype, чтобы сломать его.

<html> 
<head> 
<title>Test</title> 
<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 


<div id="container1"> 
    <div id="main"></div> 
</div> 

<div id="container2"> 

    <div id="test1"> 
     <p style="text-align: center;">content goes here</p> 
    </div> 

    <div id="test2"> 
     <p style="text-align: center;">more content goes here</p> 
    </div> 

</div> 

</body> 
</html>

И style.css:

body 
{ 
    margin: 0px; 
    overflow:hidden; 
    color: white; 
    background-color: black; 
    text-transform: lowercase; 
    height: 100%; 
} 

#container1 
{ 
    background-color: black; 
    width: 100%; 
    height: 75%; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 0%; 

} 

#main 
{ 
    width: 800px; 
    height: 480px; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
    background-color: blue; 
} 

#container2 
{ 
    background-color: black; 
    width: 100%; 
    height: 22%; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 


} 

#test1 
{ 
    position: absolute; 
    width: 50%; 
    height: 100%; 
    background-color: blue; 
} 

#test2 
{ 
    position: absolute; 
    width: 50%; 
    margin-left: 50%; 
    height: 100%; 
    overflow: auto; 
    background-color: green; 
}

источник

2011-02-05 Dataflashsabot

Вы должны указать позицию 'left/top' или' right/bottom' для абсолютно позиционированных элементов. –