CSS浮动问题求各位解答

图片说明
跟教程做的范例。如图，右侧的列表下的版权信息，正常应该显示在页面底端。不知道是哪里的问题，它跟随列表浮动到右端去了。
请问要怎么修改css，或者是浮动属性，让版权信息正确显示在页面底端？代码如下
HTML文件：

 <!doctype html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AwesomeCo Blog</title>
    <link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>

<header id="page_header">
    <h1>AwesomeCo Blog!</h1>
    <nav>
        <ul>
            <li><a href="/">Latest Posts</a></li>
            <li><a href="archives">Archives</a></li>
            <li><a href="contributors">Contributors</a></li>
            <li><a href="contact">Contact Us</a></li>
        </ul>
    </nav>
</header>

<section id="posts">
    <article class="post">
        <header>
            <h2>How Many Should We Put You Down For?</h2>

            <p>Posted by Brain on
                <time datetime="2010-10-01T14:39">October 1st, 2010 at 2:39PM</time>
            </p>
        </header>
        <aside>
            <p>
                &quot;Nerve give someone a chance to say no when
                selling your product.&quot;
            </p>
        </aside>
        <p>
            The first big rule in sale is that if the person leaves empty-handed,
            they're likely not going to come back. That's why you have to be somewhat
            aggressive when you're working with a customer, but you have to make sure
            you don't overdo it and scare them.
        </p>

        <p>
            One way you can conversation going is to avoid asking questions that have
            yes or no answer. For example, if you're selling a service plan, don't
            ever ask &quot;Are you interested in our 3 or 5 year service plan &quot;
            Instead, ask &quot;Are you interested in the 3 years service plan or the 5
            year plan, which is a better value?&quot; At first glance, they appear to
            be asking the same thing, and while a customer can still opt out, it's
            harder for them to opt out of the second question because they have to say
            more than just &quot;no.&quot;
        </p>
        <footer>
            <p><a href="comments"><i>25 Comments</i></a>...</p>
        </footer>
    </article>
</section>

<section id="sidebar">
    <nav>
        <h3>Archives</h3>
        <ul>
            <li><a href="2010/10"></a>October 2010</li>
            <li><a href="2010/09"></a>September 2010</li>
            <li><a href="2010/08"></a>August 2010</li>
            <li><a href="2010/07"></a>July 2010</li>
            <li><a href="2010/06"></a>June 2010</li>
            <li><a href="2010/05"></a>May 2010</li>
            <li><a href="2010/04"></a>April 2010</li>
            <li><a href="2010/03"></a>March 2010</li>
            <li><a href="2010/02"></a>February 2010</li>
            <li><a href="2010/01"></a>January 2010</li>
        </ul>
    </nav>
</section>

<footer id="page_footer">
    <p>&copy; 2010 AwesomeCo.</p>
    <nav>
        <ul>
            <li><a href="http://www.awesome.com/">Home</a></li>
            <li><a href="about">About</a></li>
            <li><a href="terms.html">Terms of Service</a></li>
            <li><a href="privacy.html">Privacy</a></li>
        </ul>
    </nav>
</footer>

</body>
</html>

CSS文件：


body
{
    width: 960px;
    margin: 15px auto;
    font-family: Arial, "MS Trebuchet", sans-serif;
}

p
{
    margin: 0 0 20px 0;
}

p, li
{
    line-height: 20px;
}

header#page_header
{
    width: 100%;
}

header#page_header nav ul, #page_footer nav ul
{
    list-style: none;
    margin: 0;
    padding: 0;
}

#page_header nav ul li, footer#page_footer nav ul li
{
    padding: 0;
    margin: 0 20px 0 0;
    display: inline;
}

section#posts
{
    float: left;
    width: 74%;
}

section#posts aside
{
    float: right;
    width: 35%;
    margin-left: 5%;
    font-size: 20px;
    line-height: 40px;
}

section#sidebar
{
    float: left;
    width: 25%;
}

在页面底端设置一个div，专门显示版权信息，禁止float

css有继承特性的，当你不用浮动时候，在其后面加一个div标签，设置其clear样式属性为both。

要清除浮动


#page_footer{clear:both}