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 som

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.)

Answer 2

Move overflow:hidden to #wrapper. That fixes it, but doesn't explain why.