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