如果没有设置“宽度”，IE8中的div位置不起作用

Question

我想在div中使用以下布局：

+----------------------+---------------+
|                      |               |
|                      |               |
|                      |   rightDiv    |
|                      |               |
+**********************+***************+
|             bottomDIV|               |
+**************************************+

将2个DIV（rightDiv和bottomDiv）放入DIV容器（containerDiv）。第一个浮在右边，第二个浮在底部。 containerDiv高度无法修复：它应该与rightDiv div具有相同的高度，当内部数据发生变化时，它可能会发生变化。

我写了代码：

<div id="ContainerDiv" style="position:relative; border: 1px black solid;width:300px">
    <div id="rightDiv" style="border: 1px solid #CCCCCC; float:right;">
        XXXXXXXX<br/>
        XXXXXXXX<br/>
        XXXXXXXX<br/>
        XXXXXXXX<br/>
    </div>


    <div style="clear: both;"></div>

    <div id="BottomDiv" style="border: 1px solid blue; position:absolute; bottom:0px; width:100%; text-align:center; ">
        BOTTOM
    </div>
</div>

如果我删除了containerDiv中的“width：300px”属性，在Chrome中我仍然有相同的结果，但在IE8中，“BottomDiv”输出“containerDiv”并且位于页面底部，远离其余部分。
为什么我需要放宽度值？ 谢谢你的帮助。