Unwanted gap between DIV's in IE6

What am I missing here?
Below is a very basic example of what I'm trying to do, but IE6 won't display it correctly. Mozilla, FireBird, Netscape, Opera, they all do it correctly, but IE6 is misbehaving. I want the red div in the middle, and the blue div floating to the left of it, but there is a gap between them in IE6.
Is this a known problem? Any work-arounds?
An obvious "solution" would be to make the background of 'container' either blue or red, but this won't cut it in this situation. This is only a small section of a much more complicated layout. I've removed the rest of the code for simplicity, the code below demonstrates the problem.


<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css" media="screen">
#container {
margin: 0;
padding: 0;
}#left {
background-color: blue;
width: 100px;
height: 100px;
margin: 0;
padding: 0;
float: left;
}#right {
background-color: red;
height: 100px;
margin-left: 100px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>

Your input is appreciated.
Thanks.

Unwanted gap between DIV's in IE6

IE6 produces a gap between DIV's when using CSS to position them, via float

etrese

etrese

etrese

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week