Overflow: covert messing around with fields in Chrome and Safari

Question

I set some divs for my layout, main div and menu div.

They look great in Firefox, but for some reason Chrome and Safari are messed up.

For some reason, the width of the div decreases when adding overflow:hidden; in CSS. I need overflow:hidden; , though, because I have other floats inside the main div. Here you can see an example:

http://jsfiddle.net/kR7rs/2/

This is clearly visible in Firefox, but in Safari and Chrome there is also a box on the right side of the div.

Answer 1

Removing a field from main seems to fix it:

http://jsfiddle.net/kR7rs/3/

What I think this happens when overflow:hidden , the whole element wraps around the float instead of the text inside the div. Thus, it gives the result in the violin. Then, if you also set a field on it, the width will decrease further on the left pad.

The view seems like a mistake.

(I don't have FF right now to check it out and see if it breaks it for FF.)

Answer 2

Move overflow:hidden to #wrapper . This corrects this, but does not explain why.