Chrome float? 1px optional add-on, but this is not an add-on

Question

The following html and css show two divs inside the container. The left div does not float; the right div moves to the right.

The correct div, apparently, one pixel is too narrow, and therefore the container's red background appears in that one pixel span.

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

This is not a float that creates a problem. This is the percentage width. It works fine in FF and IE, but Chrome calculates the percentage width so that pixels are not always summed up to 100%. Just try slightly changing the width of the window and you will notice that the extra 1 px will disappear / appear sometimes.

How to avoid this behavior? You need to somehow use the same percentage, so it is calculated exactly the same. The right sidebar has a width of 40%, so for the contents of the div you need to have a right margin of 40% (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; }​ 

Answer 2

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

Answer 3

I also ran into this problem and I am using two display:inline-table options display:inline-table and display:table-cell in the parent div for floating point elements. Although this is not a table, I use it as an alternative

Answer 4

For those who come to this in the future, you can create a left sidebar / content / right sidebar using liquid floats using the above method. This can be done as follows:

Container div

width of the right side: 30%; float: right; margin: 0; padding: 0;

content width: 40%; float: right; margin: 0; padding: 0;

left-sidebar margin-right: 70%; margin: 0; padding: 0;

End of container div

Provided that all containers have margin: 0; padding: 0; then it works in FF, IE, Chrome, Safari and Opera (the latter) without problems. Genius Dodgy browsers had to solve this problem a long time ago - one can only guess that web designers do not often need the ideal placement of sidebars, otherwise there would be enormous pressure on browser developers.

Answer 5

You have two inextricable spaces there. & Amp; NBSP; the character causes 1px extra space to the left of the right sidebar. Btw, position: relative redundant in this context (this is only useful when you need to fix something in IE6).

Answer 6

Set the “inner shell” to overflow hidden (just in case). Then in the right div use calc (40% + 1px) to fix the problem.