title: Footer and border acting weird with columns in CSS
body: <p>I'm trying to keep my footer at the bottom of my page, but its acting weird with my columns. For some reason the content inside the footer stays where it's supposed too (most of the time), but the border assigned to the footer stretches all the way around most of my container element instead of just wrapping around the footer at the bottom.</p>
  
  <p>Here's the css for my container:</p>
  
  <pre><code>#container
  {
      height:100%;
      display:block;
      margin: 2% 10%;
      width:80%;
      background-color: white;
      border: 0.2em solid black;
  }
  </code></pre>
  
  <p>Here's the css for the footer:</p>
  
  <pre><code>footer
  {
      text-align: center;
      margin-top: 5%;
      display:block;
      width:100%;
      height:5%;
      background-color: white;
      border: 0.2em solid black;
  }
  </code></pre>
  
  <p>Here's the CSS for my columns</p>
  
  <pre><code>.col {
      float:left;
      width: 46%;
      height:90%;
      padding:0 2% 0 2%;
  }
  </code></pre>
  
  <p>The footer is also inside the container div in my HTML if that helps.</p>
  
  <p>I'm a complete beginner at HTML and CSS, and most of this code was taken from my professor, so any help at all would be appreciated. Thank you!</p>