在兩列div佈局右欄覆蓋左欄

Question

我正在創建一個兩欄佈局的基本組合網站。左列包含導航，右列將顯示內容。

下面是HTML和CSS我有：

HTML

<div id="container"> 
    <div id="nav"> 
     <ul> 
      <li><a href="/">Home</a></li> 
      <li><a href="about.jsp">About</a></li> 
      <li><a href="portfolio.jsp">Portfolio</a></li> 
      <li><a href="contact.jsp">Contact</a></li> 
     </ul> 
    </div> 
    <div id="content"> 
     <p>Some content</p> 
    </div> 
</div> 

CSS

html, body { 
    height: 100%; 
    font-size: 16px; 
    margin: 0; 
    padding: 0; 
} 
#container { 
    max-width: 900px; 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
} 
#nav { 
    width: 20%; 
    height: 100%; 
    float: left; 
    background-color: #FFAD73; 
    top: 0; 
    left: 0; 
} 

#content { 
    width: 80%; 
    height: auto; 
    float: left; 
    top: 0; 
    right: 0; 
    background-color: #73C5FF; 
} 

li { list-style: none; 
} 

的jsfiddle：http://jsfiddle.net/rcode74/m8w4yj8o/

釷主要問題我有我目前的HTML/CSS是如果瀏覽器太窄，導航列被內容列重疊。我嘗試將導航div設置爲min-width，但導致瀏覽器縮小時將內容列移動到導航列的下方。

Answer 1

您需要爲#container設置最小寬度。它看起來像是重疊的原因，因爲它試圖保持20-80的列沒有任何最小寬度的限制。而且由於您在左欄內有內容，因此它會看起來像是重疊。

看看這裏：http://jsfiddle.net/obna91x1/1/

#container { 
    max-width: 900px; 
    margin-left: auto; 
    margin-right: auto; 
    min-width: 500px; 
}