浮動小数点使用時に重複するDivを停止する

Question

ブラウザのウィンドウのサイズを変更すると、3つのDivブロックが重なっています。

私のコードは次のとおりです。

CSS

.face{ 
    width:100%; 
    overflow: hidden; 
    clear:both; 
    clear:left; 
    clear:right; 
} 
    .center { 
    width:80%; 
    height:3000px; 
    margin:50px auto auto -100px; 
    text-align:center; 
    float:left;}. 

    .contact{ 
    width:10%; 
    float:left;} 

    .menu{ 
    width:10%; 
    float:left;} 

HTML

<div class = "face"> 

    <div class ="menu"> 
     <ul class="nav"> 
     </ul> 
    </div> 
    <div class="center"> 
     <div class ="content"> 
      <?php ?> 
     </div> 
    </div> 
    <div class = "contact"> 
      <div id="scrollingDiv"> 
     </div> 
    </div> 
</div>  

から、このコードがあるページ：私は重複を停止するために多くの方法を試してみましたenter link description here 。私は相対的/絶対的な位置を使用してみました。私もフロートなしで試しました。私は最近、左と右のパディングを使ってみました。

どのような提案や実際の例が素晴らしいでしょう。

Answer 1

私は、Internet Explorerでは、クラス 'center'を持つ要素が最小幅を維持しないと思います。 Firefox 9でも同じ問題はありません。テストはしていませんが、「コンテンツ」に640pxという固定幅を与えてみてください。