이상한 마진 문제

HTML :이상한 마진 문제

<div id="outter"> 
    <div id="left"> 
     <div id="up"> 
      This is the up div 
     </div> 
     <div id="down"> 
      <h3>This is the down div</h3> 
     </div> 
    </div> 
</div>

CSS :
enter image description here
하지만 IE6에서 :

는

#outter{ 
    height: 400px; 
    background: white; 
    border: 1px solid #bfd2e1; 
} 
#left{ 
    float: left; 
    margin-right: 0; 
    padding: 0; 
} 
#up{ 
    width: 355px; 
    height: 50px; 
    border: 1px solid #ffe59f; 
    padding: 12px; 
    line-height: 16pt; 
    margin: 15px 0 0 15px; 
} 
#down{ 
    float: left; 
    margin: 15px 0 0 15px; 
    width: 381px; 
} 
#down h3{ 
    border: 1px solid #bfd2e1; 
    background-color: #edf6fe; 
    padding: 10px; 
}

문제는 크롬/파이어 폭스에서 페이지 등이 보인다 enter image description here
보시다시피, #down에는 여백 문제가 있습니다.
바이올린 : http://jsfiddle.net/wong2/dTEcs/1/
어떻게 될 수 있습니까?