I have a webpage that previously had no doctype declaration.
Now, I’ve added <!doctype html> to the beginning. Unfortunately, it now renders differently.
There is a div that is supposed to fill the page vertically; now it only fills the top half of the page (the bottom half is empty).
Here is the div’s CSS:
#thediv {
float: left;
width: 48%;
height: 95%;
margin: 2px 2px;
}
My questions:
- how do I get the div to fill the whole page vertically again? (more important)
- does adding
<!doctype html>cause the browser to try to render it as HTML5? - why would changing the doctype cause this difference? (less important)
You’ll need to set the height of the
<html>and<body>tags (and any other tags that contain#thedivto 100% as well:The doctype causes the page to render in standards mode rather than in quirks mode. I recommend reading about quirks mode on the blog of the same name and on the doctype page.
The short summary of the issue is this: in the heady days of the internet when none of the browsers still around today were above version 4 every browser distinguished itself by being different – not by being more spec compliant. When the browser manufacturers agreed to all abide by the same spec they also decided to continue to support older ways of building web pages (the quirks mode) so that the old pages would still render properly in the new browsers. This quirks mode is still built into most browsers – they activate it when they detect a page that looks like it was built in those heady days. Each browser’s detection and resolution method is different – here’s an example of IE 8’s.