Div可以放大其他Div當然可以放大

Question

我目前正在一個網站上工作，但是我遇到了一個問題。在默認頁面縮放（！00％）下，我的網站看起來很好，但由於某些原因，當我放大時，我的邊欄會放在我的主div上。檢查截屏：
http://i.imgur.com/noMp28b.png --normal
http://i.imgur.com/DebjDfS.png --zoomed

這裏是我的CSS和HTML：

<!--Main Content--> 
    <div id="main"> 

    </div> 

    <!--Navigation--> 
    <div id="sidebox"> 
     <div id="nav"> 
      <ul> 
       <li><a href="">HOME</a></li> 
       <li><a href="">REGISTER</a></li> 
       <li><a href="">DOWNLOADS</a></li> 
       <li><a href="">CHAT BOX</a></li> 
       <li><a href="">FORUM</a></li> 
       <li><a href="">RANKINGS</a></li> 
       <li><a href="">DONATE</a></li> 
      </ul> 
     </div> 

    </div> 
    <!----> 

    <!--Server Information--> 
    <div id="sidebox"> 

    </div> 

    <!--Partners--> 
    <div id="sidebox"> 

    </div> 

----------- 
     * { 
    margin: 0; 
    padding: 0; 
} 

body { 
    width:100%; 
    max-width:960px; 
    height:100%; 
    margin:140px auto 0; 
    background-image: url('../img/bg.png'); 
} 

#sidebox { 
    background-color: #333; 
    border: 1px solid black; 
    outline: 2px solid #444; 
    width:230px; 
    min-height:100px; 
    float:left; 
    margin-bottom:14px; 
} 

#main { 
    background-color: #333; 
    border: 1px solid black; 
    outline: 2px solid #444; 
    float:right; 
    width:712px; 
    min-width:10px; 
    height:auto; 
    min-height:600px; 
} 

#nav { 
    font-family: arial; 
    background:red; 
} 

#nav ul { 
    list-style-type: none; 
} 

#nav ul li { 
    background: url('../img/navbg.jpg'); 
    padding-top:5px; 
    padding-bottom: 5px; 
    padding-left:5px; 
    border-bottom: #262626 solid; 
    border-top: #262626 solid; 
    border-width: 1px; 
} 

#nav ul li a { 
    color: #0d0d0d; 
    font-size: 14px; 
    text-decoration: none; 
} 

沒有人有任何知道我做錯了，如何解決這個問題問題？謝謝我很讚賞

Answer 1

您的#main和#nav有固定的寬度。當你縮放時，它們不能適合身體，這樣就會發生。 給身體寬度960px。當你縮放時，你會得到水平滾動條，但它們不會重疊。

#body { 
    width: 960px; 
} 

DEMO