Моя страница идеально подходит для документа и ужасно ломается при его применении.(Точнее, он ломается с любым типом HTML4. HTML3 работает нормально, но это явно неприемлемо.)
Как обычно, я сократил страницу, чтобы включить только минимум, необходимый для демонстрации проблемы, но основная проблема остается.
Без доктайпа, желательно: 
С доктипом, ужасно сломанным: 
И код, конечно.Добавьте 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;
}