Float bug in chrome? 1px extra padding, but it's not padding

Question

The following html and css shows two divs inside a container. The left div isn't floated; the right div is floated right.

The right div seems to be one pixel too narrow, and the red background color of the container is therefore showing through in that one pixel gap.

This is a simplification of my problem. http://jsfiddle.net/XPd9J/

HTML

<div class="inner-wrapper">

    <div class="right-sidebar">
        &nbsp;
    </div>

    <div class="content">
        &nbsp;<br /><br />
    </div>

</div>​

CSS

.inner-wrapper {
    position:relative;
    background-color:red;
    overflow:auto;
    width:90%;
    padding:0;
    margin:20px 0 0 20px;
}
.right-sidebar {
    position:relative;
    width:40% !important;
    background-color:lime;
    float:right;
    margin:0;
    padding:0;
}
.content {
    position :relative;
    width:60%;
    background-color:silver;
    margin:0;
    padding:0;
}
​

Answer 1

Another easy option to get the full 100% is to set the parent element to overflow:hidden and your element to width:101%.