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

It’s not the float that makes the problem. It’s the percentage width. In FF and IE it works perfect, but Chrome calculates percentage width so, that not always the pixels sum up to the full 100%. Just try to slighty change the window width and you will notice the extra 1 px to disappear/appear sometimes.

How to avoid this behavior? You need to have use the same percentage somehow, so it is calculated just exactely the same. The right sidebar is 40% wide, so you need to have a right margin of 40% for the content div (these 40% are 40% of the containing block element)

http://jsfiddle.net/XPd9J/1/

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