CODEWITHSUNDEEP
cssgoogle-chromeopera
Hitch
Hitch

Reputation: 13

Chrome and Opera fail when using floats

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 https://i.sstatic.net/O9ZxW.png Can't Chrome and Opera handle the float properly? Why is there that one pixel gap?

Upvotes: 1

Views: 236

Answers (3)

GaryDevenay
GaryDevenay

Reputation: 2415

As said above the problem is with the half pixel. Monitors work and pixels which is a block of light which cannot be halfed. Some browsers may try and be clever to fix this problem but you cannot obtain a consistent result across all browsers when doing this.

I would recommend you work to a 960px width and use something like http://www.960.gs

There is no way you can get this to work as it is not valid CSS.

Upvotes: 1

oezi
oezi

Reputation: 51807

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/

Upvotes: 2

Andrius Virbičianskas
Andrius Virbičianskas

Reputation: 556

There's your problem: width: 466.5px; Decimal point is not universally supported. Some info and possible solution: http://www.latentmotion.com/browsers-trim-pixel-decimals/

Upvotes: 1

Related Questions