为什么DIV不包含DIV？

Question

是什么导致此网页如此混乱：http://scratchpad.io/tame-cork-2164？

页脚应横穿底部和右侧的侧边栏部分。由于某种原因，该面在主div之外。

<div style="border:1px solid black">
  <header>
    <h2>Web Page</h2>
  </header>
  <nav>page 1 page 2 page 3</nav>
  <div style="float:left;width:50%;border:1px solid black">
    <section>
      section 1
    </section>
    <article>Any article content goes here.</article>
    <section>
      <p>section 2</p>
      <p>section 2</p>
    </section>
  </div>
  <div style="float:right;width:50%;border:1px solid black">
    <aside><a href="/">a sidebar</a></aside>
  </div>
</div>
<footer style="width:100%">Copyright 2018</footer>