Help with a layout problem in IE and Webkit

HTML & CSS
1

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


<!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.

2

I don’t really like either of these, but food for thought, anyhow:


<!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: -240px;
			margin-top: -500px;
		}
 
		.masterContentFrame .rightColumn {
			position: relative;
			float: left;
			color: #fff;
			background: #00f;
			height: 400px;
			width: 100%;
			/*	right: 240px;
			margin-left: 1px;*/
		}
 
		.footer { clear: both; width: 100%; height: 80px; background: orange;}
	</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>



<!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% 6em 240px;
			position: relative;
		}	
 
		.masterContentFrame .centerColumn {
			background: #0f0;
			height: 500px;
			width: 100%;	
		}
 
		.masterContentFrame .leftColumn {
			position: absolute;
			float: left;
			background: #f00;
			height: 1000px;
			width: 240px;
			left: -240px;
			top: 0;
		}
 
		.masterContentFrame .rightColumn {
			color: #fff;
			background: #00f;
			height: 400px;
			width: 100%;
		}
 
		.footer { clear: both; width: 100%; height: 80px; background: orange;}
	</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>
3

Well, the first solution is dependent on the height of the left column being fixed, which it will not be. The second solution is dependent on the center two columns being taller than the left, which is also not guaranteed. But thanks for trying. (Note - the heights given in the original example are for testing. In production height should be set to ‘auto.’

4

Maybe this then?

<!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%;
			position: relative;
		}	
 
		.centerColumn {
			background: #0f0;	
		}
 
		.leftColumn {
			position: absolute;
			background: #f00;
			width: 240px;
			top: 0;
		}
 
		.rightColumn {
			color: #fff;
			background: #00f;
		}
		
		.centerColumn, .rightColumn {margin-left: 240px;}
 
		.footer { clear: both; width: 100%; height: 80px; background: orange;}
	</style>
</head>
<body>
	<div class="header"></div>
	<div class="masterContentFrame">
		<div class="centerColumn">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </div>
		<div class="leftColumn">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </div>
		<div class="rightColumn">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </div>
	</div>
	<div class="footer"></div>
</body>
</html>
5

Thanks for looking into this. I finally fixed it through a different route primarily because I was asked to change how the layout behaves on a smaller resolution set. I ended up with the left two columns being fixed with the rightmost alone being flex, which is much, much easier to work with.