Вы не там сокращаете, где нужно. Собственно говоря (на будущее) от Вас требовалось следующее:

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#wrap {background: #FFFFCC; width: 53em; margin: 2em 4em; position: relative;}
#header {background: #FFCCFF; width: 100%; height: 10em; position: absolute; top: 0px; left: 0px; overflow: hidden;}
#content {background: #CCFFFF; width: 35em; margin-top: 10em; float: right;}
#sidebar {background: #33CCFF; display: inline; width: 16em; margin: 10em 0 0 1.5em; float: left;}
#footer {background: #CCCC99; clear: both;}
</style>
</head>

<body>
<div id="wrap">
****<div id="content">Контент</div>
****<div id="sidebar">Сайдбар</div>
****<div id="header">Хидер</div>
****<div id="footer">Футер</div>
</div>
</body>
</html>
Не больше и не меньше...

P.S. IE6 удваивает поля (margins) у блочных элементов с float (с той стороны, куда назначен float). Способов решения масса. В частности, можно назначить для блока #sidebar свойство display: inline;...