css - Overflow:hidden messing with margins in Chrome and Safari

Question

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

They look perfect in Firefox, but for some reason, Chrome and Safari get messed up.

For some reason the width of the div gets smaller when overflow:hidden; is added to the CSS. I need overflow:hidden; though, because I have other floats inside the main div. You can see the example here:

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

It shows up fine in Firefox, but in Safari and Chrome, there's a margin on the right side of the div as well.

Answer 1

Removing the margin from main seems to fix it:

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

What I think it happening is that when overflow:hidden is set, the entire element wraps around the floats instead of the text within the div. So this gives the result in the fiddle. Then if you set a margin on it also, the width is decreased further by the left padding.

Kind of seems like a bug.

(Don't have FF right now to test it and see if it breaks it for FF.)