<html>
<head>
<title>Float Layout - 3px IE Bug</title>
<style type="text/css">
html, body {
margin:0px;
padding:0px;
border:0px;
}
#wrapper {
margin:0px;
padding:0px;
border:0px;
height:100%;
background:#ffffff;
}
#left {
float:left;
width:175px;
margin:0px;
padding:0px;
border:0px;
background:#eedddd;
}
#right {
height:100%;
background:#bbeebb;
border:0px;
margin:0px;
padding:0px;
margin-left:175px;
}
p {
margin-top: 0px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left">
<p>menu</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
</div>
<div id="right">
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
</div>
</div>
</body>
</html>
If IE5 is a history for now, IE6 is used by one third of Internet users. So, for CSS beginners, the quick fix to solve this IE problem with additional space around floats is to make this space eaten by negative margin of the float itself. In practice this looks like:
#left {
float:left;
width:175px;
margin:0 -175px 0 0;
padding:0px;
border:0px;
background:#eedddd;
}
See example files at: http://rainforce.org/pile/css/