html - float 权利问题

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 中就完全出错了。 Example

Answer 1

示例 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;
}