IE和firefox显示不一样。解决方案

IE和firefox显示不一样。
<div   id= "page ">

<div   id= "111 ">     <!--顶部图片-->
</div>

<div   id= "222 ">       <!--导航-->
</div>
<!--主要内容-->
<div   id= "333 ">
<div   id= "left ">
<div   id= "left1 ">
</div>
<div   id= "left2 ">
</div>
<div   id= "left3 ">
</div>
</div>

<div   id= "right ">
<div   id= "right1 ">
</div>
<div   id= "right2 ">
</div>
<div   id= "right3 ">
</div>
<div   id= "right4 ">
</div>
<div   id= "right5 ">
</div>
<div   id= "right6 ">
</div>
</div>
</div>

<div   id= "444 "> <!--底部-->
</div>

</div>


CSS代码：

body{   text-align:center;}
#page{   width:800px;   height:auto;   margin-left:auto;   margin-right:auto;}
#111{   width:800px;   height:163px;   background:#003399;}
#222{   width:800px;   height:30px;   background:#33FFFF;}
#333{   width:800px;   height:auto;   margin:0;}

#left{   width:187px;   height:auto;   float:left;   margin-top:3px;}
#left1{   width:187px;   height:200px;   background:#000000;}
#left2{   width:187px;   height:150px;   background:#33FF66;}
#left3{   width:187px;   height:250px;   background:#6666FF;}

#right{   width:602px;   height:auto;   float:right;   margin-top:3px;}
#right1{   width:602px;   height:180px;   background:#FF0000;}
#right2{   width:300px;   height:180px;   background:#FFCC00;;   float:left;}
#right3{   width:300px;   height:180px;   background:#00FF33;;   float:   right;}
#right4{   width:300px;   height:180px;   background:#999966;;   float:left;}
#right5{   width:300px;   height:180px;   background:#CCFFCC;;   float:right;}
#right6{   width:602px;   height:100px;   background:#999999;}

#444{   width:800px;   height:120px;   background:#990000;}

在IE中正常   。。在firefox中footer不在最底层。。。

[解决办法]
Look

<div id= "page ">

<div id= "a111 "> <!--顶部图片-->
</div>

<div id= "a222 "> <!--导航-->
</div>
<!--主要内容-->
<div id= "a333 ">
<div id= "left ">
<div id= "left1 ">
</div>
<div id= "left2 ">
</div>
<div id= "left3 ">
</div>
</div>

<div id= "right ">
<div id= "right1 ">
</div>
<div id= "right2 ">
</div>
<div id= "right3 ">
</div>
<div id= "right4 ">
</div>
<div id= "right5 ">
</div>

<div id= "right6 ">
</div>
</div>
</div>

<div id= "a444 "> <!--底部-->
</div>

</div>

<style>

body{ text-align:center;}
#page{ width:800px; height:auto; margin-left:auto; margin-right:auto;}
#a111{ width:800px; height:163px; background:#003399;float:inherit;clear:both}
#a222{ width:800px; height:30px; background:#33FFFF;float:inherit;clear:both}
#a333{ width:800px; height:auto; margin:0;float:inherit;clear:both}

#left{ width:187px; height:auto; float:left; margin-top:3px;}
#left1{ width:187px; height:200px; background:#000000;}
#left2{ width:187px; height:150px; background:#33FF66;}
#left3{ width:187px; height:250px; background:#6666FF;}

#right{ width:602px; height:auto; float:right; margin-top:3px;}
#right1{ width:602px; height:180px; background:#FF0000;}
#right2{ width:300px; height:180px; background:#FFCC00;; float:left;}
#right3{ width:300px; height:180px; background:#00FF33;; float: right;}
#right4{ width:300px; height:180px; background:#999966;; float:left;}
#right5{ width:300px; height:180px; background:#CCFFCC;; float:right;}
#right6{ width:602px; height:100px; background:#999999;clear:both}

#a444{ width:800px; height:120px; background:#990000;clear:both;}
</style>