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

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;}​

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

I also encountered that issue and I use two option the display:inline-table and display:table-cell in the parent div of the floated elements..although it is not a table, I use that as an alternative