Question

I am using floats when specifying dimensions of an element. Please see this jsfiddle jsfiddle.net/yMTGJ But both Chrome and Opera fail setting up the right widths and as a result there one pixel gap between the two divs, as you can see from see image i.stack.imgur.com/O9ZxW.png Can’t Chrome and Opera handle the float properly? Why is there that one pixel gap?

Answer 1

this happens because you’re specifying the width as 466.5px, wich is roundet up to 467px by other browsers (firefox for example). chrome tries to render this correctly, so there’s a one pixel line that shows in red/yellow combined (wich confuses the browser and looks like but isn’t a gap).

to avoid this, don’t use half pixels to specify dimensions (what did you think the example should look like? chrome does exactly what i would expect, but i don’t know your intention to use half pixels).

take a look at http://jsfiddle.net/Lupna/ where i have adjusted the width of the outer div to 932px and the inner ones to 466px – works perfectly on chrome.

EDIT:
another solution that would make all browsers display the same if you need a width of 933px would be to built in a gap on your own that should be there: http://jsfiddle.net/eS7Qd/