<style type="text/css">
#head {width:500px; background-color:#CCC; margin-bottom:10px;}
#left {width:200px; float:left; background-color:#999; margin-bottom:10px;}
#main {width:300px; background-color:#333; margin-bottom:10px;}
#foot {width:500px; background-color:#666;}
</style>

<div id="head">1</div>
<div id="left">2</div>
<div id="main">3</div>
<div id="foot">4</div>

위와 같이 레이아웃을 잡아보려는데요,,
IE에선 'left' 와 'main' 이 가로로 떨어져서 나오지만, 불여우에선 겹쳐서 나와버리네요,,
'left'의 오른쪽에 div 를 두려면 왼쪽에 위치하는 div에 'float:left' 를 쓰면 되는거 아닌가요?
왜 불여우에선 안먹히지,, ㅡㅡ;

'left'와 'main'을 떨어트리려면 어떻게 해야하나요?