I am having trouble with a layout that I am trying to convert from
table based layout to css based layout. I have included source code
for a stripped down version.
The problem is that when the content area is wider that the browser
window, it drops below the left floated div, which will be a
navigation area. This only happens in IE. Firefox, Opera etc all seem
fine with it.
You can see the effect if you open the code below in an 800x600
browser, then shrink the browser window until the green bar disappears
off the right hand side. As soon as it does, the content drops.
Any ideas will be greatly appreciated since I have been fighting with
this one for far too long.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">
<html lang="en">
<head>
<title>Test Doc</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style media="all" type="text/css">
<!--
#leftbox
{
float:left;
width:200px;
background-color:red;
}
#content
{
background-color:blue;
margin-left:200px;
}
#contentbody
{
height:1%;
background-color:yellow;
}
#testregion
{
background-color:lime;
width:500px;
}
-->
</style>
</head>
<body>
<div id="leftbox">
<p>This is the left box - with a fixed width</p>
<p>This is the left box - with a fixed width</p>
</div>
<div id="content">
<div id="contentbody">
<p>This is the content area</p>
<div id="testregion">This is the test region</div>
<p>This is the content area<br>
This is the content area<br>
This is the content area<br>
This is the content area<br>
This is the content area<br>
This is the content area<br>
This is the content area<br>
This is the content area</p>
</div>
</div>
</body>
</html>
Float and margin problems in IE 
