Parent not adjusting size when using nested divs

Hi, it’s me, I have a problem again. I bet the solution is really simple and stupid but for the life of me, I can’t think of it right now.
Anyway, I have a div and I want two divs to be nested in it, one on the left hand side and one on the right side. Now no matter how much content I put in those two divs, the parent div doesn’t adjust in size to accomodate for the two divs inside but just stays under them while they flow over. Anyone know the solution? Here’s the general code.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<style>
		#maindiv {
			outline:1px solid red;
			width:600px;
			margin:0 auto;
		}
		#leftdiv {
			float:left;
			width:400px;
			margin:0px;
			outline:1px solid red;
		}
		#rightdiv {
			float:left;
			width:200px;
			margin:0px;
			outline:1px solid red;
		}
		</style>
	</head>
	<body>
		<div id="maindiv">
			<div id="leftdiv">
			heh
			</div>
			<div id="rightdiv">
			woo
			</div>
		</div>
	</body>
</html>