Here's the test page:
<!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>Test</title>
<style type="text/css">
#Wrapper
{
width: 750px;
border: 10px solid black;
background-color: Purple;
}
#Content
{
margin: 15px 30px 0px 30px;
border: 5px solid Blue;
background-color: White;
border: 5px solid Blue;
width: 660px;
}
#FloatLeft
{
background-color: Yellow;
border: 5px solid Red;
margin-top: 25px;
float: left;
width: 320px;
}
#FloatRight
{
background-color: Yellow;
border: 5px solid Green;
margin-top: 25px;
float: right;
width: 320px;
}
#Footer
{
margin-top: 50px;
background-color: White;
border: 5px solid Blue;
width: 740px;
}
</style>
</head>
<body>
<div id="Wrapper">
<div id="Content">Content
<div id="FloatLeft">FloatLeft</div>
<div id="FloatRight">FloatRight</div>
</div>
<div id="Footer">Footer</div>
</div>
</body>
</html>
On Windows, IE6, Opera 7.2, and Mozilla Firebird 0.7 all render this
slightly different. The layout I'm trying to achieve is the way its
rendered in IE6. Which browser gets this correct, and how might I achieve
the desired layout in all three browsers?
