Container Won't span the height of page when sidebar is added

Question

I'm putting together a Tumblr layout and I'm running into a snag. I got everything working fine, but as soon as I added my sidebar, the container stopped expanding the height of the page. It stops right under the end of the sidebar and I'm not sure why when previously it expanded the width of the content section.

URL: http://nellyswritingroom.tumblr.com/

Structural 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 skeleton:

<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>

Any help would be greatly appreciated!

Answer 1

You need to add a clear: both; after the aside element closes.

So, after:

<aside>
    Testing
</aside>

Add:

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

And you will see the issue should be resolved.

Of course, it would be better to make a .clear CSS class and call that, rather than using inline CSS.