Anledningen till att #text inte sätter sin marginal från #sketch, utan från container, är för att element som har float flyter ovanpå alla andra element. #text ska alltså inte bry sig om #sketch, men Internet Explorer tolkar det hela fel, så att den ändå gör det. Testa att sätta float på #text också, så får du rätt marginal.
Jag hade gjort:
<div id="left">
<!-- Här lägger du bilden till vänster som bakgrund -->
</div>
<div id="middle">
<!-- Här lägger du all text -->
</div>
<div id="right">
<!-- Här lägger du den lilla högerbilden -->
</div>
Och så floatar du dessa element left, så ska det fixa sig.