Hi,
I worked it out for you.
Your code should look something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Untitled</title>
<style>
body{
text-align:center;/*gets red div centered in ie6*/
}
#red{
text-align:left;
background-color:red;
width:900px;
height:200px;
margin:auto;/*gets red div centered in ie6*/
}
#blueleft{
background-color:blue;
height:160px;
width:400px;
/*ie 6 doubles the margin on floated divs so we need a hack*/
margin:20px 25px 20px 25px !important; /*this is for standards compliant browsers*/
margin/**/:/**/20px 12px 20px 12px; /*and this is for ie6*/
float:left;
}
#blueright{
background-color:blue;
height:160px;
width:400px;
margin:20px 25px 20px 25px !important;
margin/**/:/**/20px 12px 20px 12px;
float:right;
}
.yellow{
background-color:yellow;
width:180px;
height:140px;
margin-left:13px !important;
margin-left/**/:/**/7px;
margin-top:10px;
float:left
}
</style>
</head>
<body>
<div id="red">
<div id="blueleft">
<div class="yellow">
</div>
<div class="yellow">
</div>
</div>
<div id="blueright">
<div class="yellow">
</div>
<div class="yellow">
</div>
</div>
</div>
</body>
</html>
