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

Code html:
	<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; }
	<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 class="footer"></div>

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