My page is perfect with a doctype, and breaks horribly when one is applied.

Question

0

Asked: May 19, 20262026-05-19T17:37:05+00:00 2026-05-19T17:37:05+00:00

My page is perfect with a doctype, and breaks horribly when one is applied.

0

My page is perfect with a doctype, and breaks horribly when one is applied. (More specifically, it breaks with any HTML4 doctype. An HTML3 one works fine, but that’s clearly not acceptable.)

As is typical, I have cut the page down to only include the minimum needed to demonstrate the problem, but the main problem remains.

Without doctype, desired:
desired

With doctype, horribly broken:
enter image description here

And the code, of course. Add a doctype to break it.

<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>

And 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;
}