html - IE8のdiv位置は、「幅」を設定しないと機能しません

Question

divを使用して次のレイアウトを作成したいと思います。

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

2つのDIV（rightDivおよびbottomDiv）をDIVコンテナー（containerDiv）に入れます。最初のものは右側に浮かんでいて、2番目のものは下に立っています。containerDivの高さは固定できません。rightDivdivと同じ高さである必要があります。これは、内部のデータが変更されたときに変更される可能性があります。

私はコードを書きました：

<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」から出てページの下部に表示され、残りの部分から遠く離れています。構図。
幅の値を入力する必要があるのはなぜですか？ご協力ありがとうございました。