css - float div 的问题

Question

我正在尝试制作一个包含 3 栏的网站，但我似乎无法正确显示正确的导航。它始终显示在其他 div 下方。有人可以告诉我为什么会发生这种情况以及如何解决这个问题吗？

这是 CSS:

body {
    background-image:url('images/background.png');
    background: no-repeat center center fix;
    background-size: cover;
    background-attachment: fixed;
}

p {
    margin: 0px;
    color: #231f20;
    font-size: 16px;
    font-family: "Garamond Premier Pro", serif;
    text-align: left;
}

h1 {
    margin: 0px;
    color: #231f20;
    display: inline-block;
    text-align: center;
    font-size: 24px;
    font-family: "Myriad Pro", sans serif;
}

#container {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    height: 750px;
}

#header {
    width: 960px;
    height: 100px;
}

#marquee {
    width: 960px;
    height: 30px;
    font-size: 24px;
    background-color: #bc34ba;
    font-family: "Garamond Premier Pro", serif;
}

#topnav {
    border-bottom: 1px #000 solid;
    margin: 0px;
    padding: 0px 0px 0px 0px;
    width: 960px;
    height: 20px;
    background-color: fed450;

#leftnav {
    margin: 0px;
    font-family: "Century Gothic", sans serif;
    float: left;
    width: 160px;
    background-color: f58025;
    text-align: left;
    height: 580px;
}

#body {
    margin: 0px;
    border-right: 1px dashed #694717;
    width: 640px;
    height: 580px;
    margin: auto;
    padding: 10px 0px 0px 10px;
    background-color: d80074;
}

#rightnav {
    margin: 0px;
    font-family: "Century Gothic", sans serif;
    float: right;
    width: 160px;
    background-color: c1d82f;
    text-align: right;
    height: 580px;
}

#footer {
    width: 960px;
    height: 20px;
    text-align: center;
    clear: both;
}

这是 HTML:

<div id="container">
    <div id="header"></div>
    <div id="marquee"></div>
    <div id="topnav"></div>
    <div id="leftnav"></div>

    <div id="body">
        <h1>Title<h1>
        <br>
        <p>This is where the content is.</p>
    </div>

    <div id="rightnav"></div>
    <div id="footer"></div>
</div>

Answer 1

在所有 backgroud-color: 值前放置一个 # 符号。为所有三列提供适当的 width。 float: left 在 #body 和 #rightnav 上，假设你想要 #leftnav, #body，#rightnav。另外，使用 } 关闭 #topnav。