Floating DIVs have a gap...?

[xFinaLx]

**EDIT** Fixed, changed the float on the right dive to 'left.'

Ok, so basically I have 3 floating divs: left, right, and main. Left and right have widths of 10% each, and main has a width of 80%. The problem I'm having is that there is about a 1px gap between the main and right divs. Here is the basic structure of my code:



<style>
#left{
float: left;
width: 10%;
height: 200px;
background-color: #000;
}
#main{
float: left;
width: 80%;
height: 200px;
background-color: #000;
}
#right{
float: right;
width: 10%;
height: 200px;
background-color: #000;
}
</style>
<div id="left">
</div>
<div id="main">
</div>
<div id="right">
</div>



So is there a reason for the gap? It appears in all browser's I've tried (Chrome, Safari, IE, FF)

[abduraooft]

To make a three column layout, you don't need to have apply floats on all columns. Have a look at http://bonrouge.com/3c-hf-fluid.php