在两列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; 
}