IE下float产生双倍margin

这个绝对是IE6的bug。我想要达到的是如下的效果。

通过三个div，排布好侧栏和内容区。

我用了如下的css：

<style type="text/css">#panel{width:500px; background:#CC0000; overflow:auto;}#box1{ width:150px; height:100px;  margin:10px 0 10px 10px; float:left;background:#FF9;}#box2{ width:320px; height:100px; margin:10px; float:left;background:#FCF; }</style><div id="panel"><div id="box1">box1</div><div id="box2">box2</div></div>

然后在firefox下能够得到完美的结果，可是到了IE6里，却得到如下的结果：

box1和box2左侧的margin值实际上为20px，是原来的两倍。

解决方法：给box1和box2添加display:inline，这样就能在IE下也得到目标结果。

<style type="text/css">#panel{width:500px; background:#CC0000; overflow:auto;}#box1{ width:150px; height:100px;  margin:10px 0 10px 10px; float:left;background:#FF9;display:inline;}#box2{ width:320px; height:100px; margin:10px; float:left;background:#FCF;display:inline }</style><div id="panel"><div id="box1">box1</div><div id="box2">box2</div></div>

当减小box2的宽度或者增加box2的宽度，在IE下又出现了新的问题，就是box2的margin-bottom丢失了，活活被截断，如下图所示。这又是一个待解决的问题。而firefox下完全正常。天杀的IE，怎么总是IE出问题。