title: Why is my footer acting like it contains other divs that aren't actually child elements?
body: <p>I was trying to get the footer section of my site to appear beneath the main content on the page, but after I was having issues getting it to appear in the correct place, I added a background colour to it so I could better see what was going on.</p>
  
  <p>I noticed that it seems to be wrapping around all the child divs of my <code>useswrapper</code> div (ignoring the heading and horizontal rule above them for some reason).</p>
  
  <p>As you can see in my code below, the footer section is a couple of lines down from those divs and contains literally nothing other than a paragraph tag at the moment, so I have no idea what it's doing or why it's doing it?</p>
  
  <p>I did try searching for an answer to this question, but everything I found seemed to be about divs not staying in the divs they're supposed to, while this is two unrelated divs (besides being children of the same element) combining for no apparent reason.</p>
  
  <p>My code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#wrapper {
    text-align: center;
  }
  #useswrapper {
    width: 80%;
    margin: 0 auto;
  }
  .usesdiv {
    width: 21%;
    float: left;
    padding-left: 25px;
    padding-right: 25px;
  }
  header,
  body {
    text-align: center;
  }
  .usesimg {
    width: 100%;
    border-radius: 20px;
  }
  .navlist li {
    display: inline;
    margin: 0;
    padding: 0;
  }
  .navlist li a {
    text-decoration: none;
    color: white;
    padding-left: 0.3%;
    padding-right: 0.3%;
  }
  .navlist {
    margin-left: -3em;
    padding: 3px;
  }
  #mainnav {
    background: #B36868;
    width: 80%;
    text-align: center;
    margin: 0 auto;
    padding: 0;
    border-radius: 1em;
  }
  hr {
    width: 90%;
    color: #B36868;
  }
  h1,
  h2,
  h3 {
    color: #B36868;
    font-family: 'Pacifico', cursive;
  }
  h3 {
    font-size: 1.5em;
  }
  p,
  a {
    font-family: 'Old Standard TT', serif;
  }
  #purchasepane {
    width: 40%;
    margin: 0 auto;
    background: #B36868;
    border-radius: 15px;
    padding-bottom: 1px;
    border-style: solid;
    border-width: 6px;
    border-color: #A43737;
  }
  .boxtitle {
    color: white;
    margin-top: 0%;
  }
  #quantity {
    color: white;
  }
  footer {
    background: grey;
    width: 80%;
    text-align: center;
    margin: 0 auto;
    padding: 0;
    border-radius: 1em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;The Goodwill Asbestos Corporation&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
    &lt;link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'&gt;
    &lt;link href='https://fonts.googleapis.com/css?family=Old+Standard+TT' rel='stylesheet' type='text/css'&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="wrapper"&gt;
  
      &lt;header&gt;
        &lt;img src="images/logo.jpg" id="logo"&gt;
        &lt;nav id="mainnav"&gt;
          &lt;ul class="navlist"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Cart&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Login&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sign Up&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
        &lt;div id="intro"&gt;
          &lt;p&gt;Are you looking for a cheap alternative to artificial snow? Are you looking for a way to draw out your talcum powder supply? Perhaps you're in search of a safer cigarette filter?&lt;/p&gt;
          &lt;p&gt;Whatever your issue, The Goodwill Asbestos Corporation has you covered.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/header&gt;
  
      &lt;div id="purchasepane"&gt;
        &lt;h2 class="boxtitle"&gt;Purchase Now!&lt;/h2&gt;
        &lt;form action="#"&gt;
          &lt;span id="quantity"&gt;Quantity (Kg):&lt;/span&gt; 
          &lt;input type='text' name="quant"&gt;
          &lt;input type="submit" value="Add to Cart"&gt;
        &lt;/form&gt;
      &lt;/div&gt;
  
      &lt;div id="useswrapper"&gt;
        &lt;h2&gt;Uses of Asbestos&lt;/h2&gt;
        &lt;hr&gt;
        &lt;div id="snow" class="usesdiv"&gt;
          &lt;h3&gt;Artificial Snow&lt;/h3&gt;
          &lt;img src="images/snow.jpg" class="usesimg"&gt;
        &lt;/div&gt;
        &lt;div id="talc" class="usesdiv"&gt;
          &lt;h3&gt;Talcum Enhancer&lt;/h3&gt;
          &lt;img src="images/talc.jpg" class="usesimg"&gt;
        &lt;/div&gt;
        &lt;div id="filters" class="usesdiv"&gt;
          &lt;h3&gt;Cigarette Filters&lt;/h3&gt;
          &lt;img src="images/filters.jpg" class="usesimg"&gt;
        &lt;/div&gt;
        &lt;div id="dandruff" class="usesdiv" class="usesimg"&gt;
          &lt;h3&gt;Prank Dandruff&lt;/h3&gt;
          &lt;img src="images/dandruff.jpg" class="usesimg"&gt;
        &lt;/div&gt;
        &lt;div id="sweetner" class="usesdiv" class="usesimg"&gt;
          &lt;h3&gt;Beverage Sweetner&lt;/h3&gt;
          &lt;img src="images/sweetner.jpg" class="usesimg"&gt;
        &lt;/div&gt;
        &lt;div id="toothpaste" class="usesdiv"&gt;
          &lt;h3&gt;Toothpaste Texture&lt;/h3&gt;
          &lt;img src="images/toothpaste.jpg" class="usesimg"&gt;
        &lt;/div&gt;
        &lt;div id="toy" class="usesdiv"&gt;
          &lt;h3&gt;Childrens Toy&lt;/h3&gt;
          &lt;img src="images/toy.jpg" class="usesimg"&gt;
        &lt;/div&gt;
        &lt;div id="sinus" class="usesdiv"&gt;
          &lt;h3&gt;Sinus Cleaner&lt;/h3&gt;
          &lt;img src="images/sinus.jpg" class="usesimg"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;footer&gt;
        &lt;p&gt;Copyright 2016&lt;/p&gt;
      &lt;/footer&gt;
  
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>