F30: Seltsames box-model-Verhalten von Webkit-Browsern

Beitrag lesen

Hallo zusammen,

ich bin in den letzten Tagen auf ein wirklich seltsames Verhalten von Webkit-Browsern gestoßen: Es geht dabei um die Art und Weise, wie ein margin neben anderen (gefloateten) Blöcken berechnet wird.
Das müsste in meinen Augen eigtl. ein gängiges Problem sein, trotzdem konnte ich dazu nichts finden.

Folgende Situation:
Ich habe zwei <aside>s gefolgt von einem <div>. Alle werden nebeneinander angzeigt, der <div> ganz links und dann #aside-1 und #aside-2.
Diesen Effekt erziele ich durch den folgenden CSS-Code:

  
aside {  
  margin-bottom: 30px;  
  padding: 0px 10px 10px;  
  width: 180px;  
}  
  
#aside-1 {  
  float: right;  
  margin-left: -400px;  
  margin-right: 200px;  
}  
  
#aside-2 {  
  float: right;  
}  
  
div {  
  overflow: auto;    /* Block formatting context */  
  
  margin-right: 400px;  
  padding: 0px 10px 0px 20px;  
}  

Das funktioniert auch ganz wunderbar im Firefox und IE>6.
In Chrome und Safari allerdings wird der margin-right des <div>s nicht von der ganz rechten Begrenzung, sondern erst von der linken Seite von #aside-2 aus berechnet. Das führt dazu, dass der <div> im Endeffekt 200 Pixel (Breite + padding von #aside-2) zu schmal ist.

Woher kommt dieses seltsame Webkit-Verhalten und was kann man dagegen tun?
Vielen Dank euch Allen im Voraus!