title: Html5 - Overlapping of footer over the main content
body: <p>I have this html file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="width = device-width"&gt;
      &lt;meta name="description" content="Some training on web design"&gt;
      &lt;meta name="keywords" content="web, design"&gt;
      &lt;meta name="author" content="Houssem badri"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;script src="js/script.js"&gt;&lt;/script&gt;
      &lt;title&gt;My Web design | Welcome&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;header&gt;
          &lt;div class="branding"&gt;
            &lt;h1&gt;Some title&lt;/h1&gt;
          &lt;/div&gt;
          &lt;nav&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Contact us&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;About us&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="current" href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/nav&gt;
        &lt;/header&gt;
          &lt;div  class="left-col"&gt;
            &lt;section&gt;
              &lt;article&gt;
                &lt;h1&gt;My first article&lt;/h1&gt;
                &lt;p&gt;Some Text&lt;/p&gt;
              &lt;/article&gt;
              &lt;article&gt;
                &lt;h1&gt;My Second article&lt;/h1&gt;
                &lt;p&gt;Some Text&lt;/p&gt;
              &lt;/article&gt;
            &lt;/section&gt;
          &lt;/div&gt;
          &lt;div class="mid-col"&gt;
            &lt;section&gt;
              &lt;h1&gt; Main section title &lt;/h1&gt;
              &lt;p&gt;Some Text&lt;/p&gt;
            &lt;/section&gt;
          &lt;/div&gt;
        &lt;aside role="complementary"&gt;
          &lt;h1&gt;Aside title&lt;/h1&gt;
          &lt;p&gt; Some text &lt;/p&gt;
        &lt;/aside&gt;
        &lt;footer&gt;
            &lt;h4&gt;Copyright&amp;copy &lt;a href="#"&gt;blabla.com&lt;/a&gt;&lt;/h4&gt;
        &lt;/footer&gt;
    &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>
  
  <p>And this css styling file:</p>
  
  <pre><code>/* Global */
  
  body{
      background: #E1F9A8;
      font-family: "Arial";
      font-size: 16px;
      width: 80%;
      margin: auto;
      overflow: hidden;
      padding-bottom:60px;
  }
  ul{
      margin:0;
      padding:0;
  }
  
  /* Header */
  header{
      border: 1px solid;
      border-radius: 10px;
      background-color: #D0D8BE;
      min-height: 75px;
      padding-top:30px;
      margin-top: 20px;
  }
  header nav{
      margin-top:10px;
  }
  header li{
      float: right;
      padding: 0 10px 10px 0;
      display: inline;
  }
  header a {
      text-decoration: none;
      text-transform: uppercase;
      color: #226B90;
      font-weight: bold;
  }
  header .branding{
      float: left;
      margin: 0 0 35px 10px;
      /* Some design */
      text-shadow: 1px 1px 2px orange;
  }
  header .branding h1{
      margin:0;
  }
  header .current, header a:hover{
      color: #C48B19;
      text-shadow: 1px 1px 2px orange;
  }
  
  /* Left side */
  .left-col {
      width: 26%;
      float: left;
      border: 1px solid;
      border-radius: 10px;
      overflow: hidden;
      margin-top: 10px;
      background-color: #FAF8F3;
      margin-right: 12px;
  }
  .left-col  h1{
      padding-left: 10px;
  }
  .left-col  p{
      padding-left: 10px;
  }
  .left-col  i{
      padding-left: 10px;
  }
  .left-col  .read-more{
      color: #C48B19;
      text-shadow: 1px 1px 2px orange;
      float: right;
      text-decoration: none;
  }
  
  /* Right side */
  aside{
      width: 25%;
      float: left;
      border: 1px solid;
      border-radius: 10px;
      overflow: hidden;
      margin-top: 10px;
      background-color: #FAF8F3;
  }
  aside h1{
      padding-left: 10px;
  }
  aside form{
      padding: 0 10px 10px 10px;
  }
  
  /* Main section */
  .mid-col{
      width: 46%;
      border: 1px solid;
      border-radius: 10px;
      overflow: hidden;
      margin-top: 10px;
      background-color: #FAF8F3;
      float: left;
      margin-right: 12px;
  }
  
  .mid-col h1, .mid-col h2, .mid-col img, .mid-col p{
      padding-left: 10px;
  }
  .mid-col img{
      width: 96%;
  }
  
  /* footer */
  footer{
      border: 1px solid;
      border-radius: 10px;
      background-color: #D0D8BE;
      padding:20px;
      margin:20px 0 0 20px;
  }
  </code></pre>
  
  <p>When I see the output, I get this overlapping. I didn't catch how to fix it. I think I have bad restructured my html 5 page.</p>
  
  <p><a href="https://i.stack.imgur.com/WrPJV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WrPJV.png" alt="enter image description here"></a></p>