Bon voici ce qui se passe :
the expression collapsing margins means that adjoining margins (no
non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.
Two or more adjoining vertical margins of block boxes in the normal flow collapse. The resulting margin width is the maximum of the adjoining margin widths.
En d'autres termes, si la toute première chose qui apparaît dans #ext est la marge de #int sans qu'il y ait de bordure ni rien, les marges de #ext et #int sont fusionnées, autrement dit tu te retrouves avec une marge commune à ces deux divs imbriquées et dont la largeur est égale au max des deux (donc à la largeur de celle de #int puisque pour #ext c'est 0). C'est tordu...
In the case of negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the positive adjoining margins.
Donc il semblerait que tu puisses résoudre ça en mettant une marge négative à #ext...
(
http://www.w3.org/TR/CSS2/box.html#collapsing-margins )
Ils donnent aussi quelques cas où ça collapse pas, ce qui peut aussi t'être utile. Essentiellement ça collapse pas si ton contenant est directement la racine (ie l'élément <html> si je ne m'abuse), si c'est un float, s'il est en position:absolute, ou s'il a un overflow autre que visible (c'est-à-dire hidden ou scroll). Apparemment dans tous les autres cas ça collapse et donc il faut mettre à #ext soit une marge négative pour compenser soit un border ou un padding pour séparer. Je ne sais pas si ça marche de mettre un border de largeur nulle ?