html - 添加侧边栏时容器不会跨越页面的高度

Question

我在整理 Tumblr 布局时遇到了麻烦。我一切正常，但是一旦我添加了侧边栏，容器就停止扩展页面的高度。它停在侧边栏末端的正下方，我不确定为什么以前它会扩展内容部分的宽度。

网址:http://nellyswritingroom.tumblr.com/

结构 CSS:

#container {
    margin: 0 auto;
    padding: 30px 60px 30px 60px;
    width: 900px;
}
#main {
    margin-top: 50px;
}
#content {
    width: 620px;
    float: left;
    margin: 0;
}
aside {
    width: 220px;
    float: left;
    margin-left: 60px;
}


header#top {
    text-align: center;
    height: 293px;
    margin-bottom: 8px;
}

header#top h1{
    position:relative;
    width:500px;
    height:285px;
    overflow:hidden;
    float:left;
}

header#top h2 {
    position:relative;
    width:400px;
    height:285px;
    overflow:hidden;
    float:left;
}

HTML 骨架:

<div id="container">
    <header id="top>
        <h1>
        content
        </h1>
        <h2>
            content
        </h2>
    </header>

    <nav>Nav Goes here</nav>

    <section id="content">
        Content on the left
    </section>

    <aside>
        Sidebar Content
    </aside>
</div>

如有任何帮助，我们将不胜感激!

Answer 1

你需要加一个clear: both;在 aside 元素关闭之后。

所以，之后:

<aside>
    Testing
</aside>

添加:

<div style="clear: both;"></div>

您会看到问题应该得到解决。

当然，最好创建一个 .clear CSS 类并调用它，而不是使用内联 CSS。