html - フロート権問題

Question

div を固定サイズで右にフロートさせたいのですが、残りのスペースを残す必要があります。私はこれを流れるような方法で行いました：

HTML:

<div class="container">
<div id="rightCntr">
</div>
<div id="leftCntr">
</div>
</div>

CSS:

#leftCntr { 
float: none; /* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
width: auto;
overflow: hidden; 
}

#rightCntr { float: right; width: 213px;}

これは Firefox と Chrome では問題なく動作しますが、IE8 ではまったくうまくいきません。例

Answer 1

IE で適切な結果を得るには、float:right の代わりにこれを使用できます。

    position: absolute;
    right: 8px;
    text-align: right;

Answer 2

jsBin の例: http://jsbin.com/ixebuf/1/ (IE8、Fx でテスト済み) (背景はテスト用に配置されています)

.container {
  width: 100%;
  overflow: hidden;
}
#rightCntr {
  float: right;
  width: 213px;
  background: gray;
}
#leftCntr {
   margin-right: 213px; 
   background: yellow;
}

Answer 3

#leftCntr { 
    float: left; 

    /* not needed, just for clarification */ 
    background: #e8f6fe; 

    /* the next props are meant to keep this block independent 
     *  from the other floated one    
     */ 
    width: 100px; 
    overflow: hidden; 
    height: 100px; 
} 

#rightCntr { 
    float: right; 
    width: 213px; 
    border: 1px solid red; 
    background: red; 
    height: 100px; 
    width: 100px; 
    white-space: nowrap;
}

これを試してください。背景色を削除してください