Firefox has this right, and I have no idea what I can do to fix IE 9 and webkit without breaking Firefox

Code html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Test</title>
	<style type="text/css">
		.masterContentFrame {
			margin: 6em 1%;
			padding-left: 240px;
		}	
 
		.masterContentFrame .centerColumn {
			position: relative;
			float: left;
			background: #0f0;
			height: 500px;
			width: 100%;	
		}
 
		.masterContentFrame .leftColumn {
			position: relative;
			float: left;
			background: #f00;
			height: 1000px;
			width: 240px;
			right: 240px;
			margin-left: -100%;
		}
 
		.masterContentFrame .rightColumn {
			position: relative;
			float: left;
 
			color: #fff;
			background: #00f;
			height: 400px;
			width: 100%;
			/*	right: 240px;
			margin-left: 1px;*/
		}
 
		.footer { clear: both; }
	</style>
</head>
<body>
	<div class="header"></div>
		<div class="masterContentFrame">
			<div class="centerColumn">Lorem ipsum</div>
			<div class="leftColumn">Lorem ipsum</div>
			<div class="rightColumn">Lorem ipsum</div>
		</div>
	<div class="footer"></div>
</body>
</html>

I cannot change the DOM. I have 2 working layouts against it using media queries.