关于div的background-color属性在ie中可以正常显示但是在firefox中无法显示的有关问题

关于div的background-color属性在ie中可以正常显示但是在firefox中无法显示的问题
当使用javascript向cLeft和cRight插入内容的时候，如果两边高度不一样，则在firefox中少的一部分的背景就不是自己定义的颜色，而是上个元素body定义的颜色。在ie中却没有这个问题。请问这个问题应该怎么解决。先谢谢了。

css代码如下
body{
text-align:   center;
background:   url( "../images/page_background.jpg ")   repeat-x   #9FA9B3;
}
#mainContent{
width:   100%;
background-color:   #FFFFFF;
margin-left:   auto;
margin-right:   auto;
}
#cLeft{
width:   200px;
float:   left;
background-color:#FFFFFF;
text-align:   center;
}
#cRight{
width:   560px;
float:   left;
background-color:#FFFFFF;
height:   100%;
padding:   5px;
}
html代码如下

<div   id= "mainContent ">
<div   id= "cLeft "> Nav </div>
<div   id= 'cRight "> Content </div>
</div>



[解决办法]
只要写 background:#FFF; 这样就可以设置背景色了.
[解决办法]
在ff中，#mainContent中的内容全部浮动的话，mainContent本身没有高度，你需要在
#mainContent后面加一个div清除浮动。
.clearFloat {
clear:both;
}
<div id= "mainContent ">
<div id= "cLeft "> Nav </div>
<div id= 'cRight "> Content </div>
</div>
<div class= "clearFloat "> </div>

或者增加css：
#mainContent:after {
content: ". ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}