嵌套div高度自适应

div嵌套的时候，外层的div的高度自适应的问题，当然这在IE下是没问题的，主要是firefox下的问题。如下图所示：

<style type="text/css">
#box {
	background-color:#0cf;
	width:100%; border:1px #00f solid; }
#left {
	background-color:#fc0; 
	border:1px #f30 solid;
	float:left;
	width: 200px;
}
#right {
	background-color:#9c9; 
	border:1px #090 solid;
	float:right;
	width: 300px;
}
</style>

<div id="box">
<div id="left">
1111111111<br />
2222222222222<br />
333333333333333333333<br />
4444444<br />
555555555555<br />
666666666666666<br />
777777777777777777</div>
<div id="right">
1111111111<br />
22222222222222222222222<br />
333333333333333333333<br />
444444444444444<br />
555555555555555555555555555555</div>
</div>

其实很简单，只需给外层div加个overflow:auto;即可。

<style type="text/css">
#box {
	background-color:#0cf;
	width:100%; border:1px #00f solid; overflow:auto;
}
#left {
	background-color:#fc0; 
	border:1px #f30 solid;
	float:left;
	width: 200px;
}
#right {
	background-color:#9c9; 
	border:1px #090 solid;
	float:right;
	width: 300px;
}
</style>

<div id="box">
<div id="left">
1111111111<br />
2222222222222<br />
333333333333333333333<br />
4444444<br />
555555555555<br />
666666666666666<br />
777777777777777777</div>
<div id="right">
1111111111<br />
22222222222222222222222<br />
333333333333333333333<br />
444444444444444<br />
555555555555555555555555555555</div>
</div>