Things are a little quiet around here so here's a quick little test for you debuggers

In the following example an element is floated but the following element doesn't float alongside as you may expect.

Who can explain this behaviour correctly?

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
p {margin:0;padding:10px;}
.float {
	width:300px;
	height:100px;
	background:red;
	float:left;
}
.content {
	background:blue;
	width:200px;
	height:200px;
	color:#fff;
}
</style>
</head>
<body>
<div class="float">
		<p>I am floated left</p>
</div>
<div class="content">
		<p>Why is this blue box underneath the float and not beside it?</p>
</div>
</body>
</html>
And for bonus points please explain why ie7 and under render the elements side by side? (this can be seen in action by using IE7 mode in the developer tools of ie10+).