Desbordamiento: desorden oculto con márgenes en Chrome y Safari

Question

He configurado algunos divs para mi diseño, un div principal y un menú div.

Se ven perfectos en Firefox, pero por alguna razón, Chrome y Safari se arruinan.

Por alguna razón, el ancho del div se reduce cuando se agrega overflow:hidden; al CSS. Necesito overflow:hidden;, porque tengo otras carrozas dentro de la div principal. Se puede ver el ejemplo aquí:

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

Se manifiesta bien en Firefox, pero en Safari y Chrome, hay un margen en el lado derecho de la división de escala.

Answer 1

Extracción del margen de main parece solucionarlo:

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

lo que creo que pasa es que cuando overflow:hidden se establece, el elemento completo se envuelve alrededor de los flotadores en lugar del texto dentro de la div. Entonces esto da el resultado en el violín. Luego, si establece un margen también, el ancho se reduce aún más mediante el relleno izquierdo.

Parece un error.

(no tienen FF en este momento para probarlo y ver si se rompe por FF.)

Answer 2

Mueva overflow:hidden a #wrapper. Eso lo arregla, pero no explica por qué.