I'm trying to layout a page with a similar structure to that below. However, the the top margin defined for the content box is being ignored in IE 6. In N6 the top margin appears OK.

The curious thing is that the top margin appears correctly if I swap the position of the sidebar and content boxes in the HTML.

ie:
Code:
...
<div id="content"></div>
<div id="sidebar"></div>
...
I can swap the position of the 2 boxes but I'd prefer to have things as they are in the html below.

Am I just missing something obvious?

Test page html
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>2 column check</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
	<style>
		body {
			margin: 0px;
			padding: 0px;
		}
		#header {
			width: 100%;
			height: 50px;
			background-color: #cc6600;
		}
		#content {
			width: 400px;
			height: 400px;
			background-color: #cccc00;
			margin: 20px 0px 0px 180px;
		}
		
		#sidebar {
			position: absolute;
			left: 0px;
			top: 70px;
			width: 150px;
			height: 250px;
			background-color: #ffcc00;
		}
	</style>
</head>

<body>

	<div id="header"></div>
	<div id="sidebar"></div>
	<div id="content"></div>

</body>
</html>