title: large gap underneath floated columns?
body: <p>I have created a typical 3 column layout. For some reason, the middle column is creating a very large and unwanted gap between the top three and the bottom three. Is there a way to make it so that the gap between all of the container is the same?</p>
  
  <p><strong><a href="https://jsfiddle.net/avocyf33/" rel="nofollow">JSFiddle</a></strong></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>* {
   margin: 0;
   padding: 0;
   box-sizing: border-box; 
  }
  
  html, body {
   font-family: 'Lato', sans-serif;
  }
  
  column-container {
   width: 100%;
   background: #EEEEEE;
  }
  
  wrapper-container {
   width: 80%; 
   margin: auto;
  }
  
  column-three {
   padding: 25px;
  }
  
  .container {
   background: #FFFFFF;
   border-radius: 2px;
   box-shadow: 0px 2px 1px 1px rgba(0,0,0,0.05);
  }
  
  .container h2 {
   padding: 25px;
   font-size: 18px;
   text-align: center; 
   font-weight: bold;
   color: #22313F;
  }
  
  .container:hover h2 {
   color: #22313F;
  }
  
  .container .image {
   margin: auto;
   width: 150px;
   height: 150px;
   border-radius: 100%;
   background: #22313F; 
  }
  
  .container .text {
   padding: 25px;
   font-weight: 400;
   line-height: 30px; 
  }
  
  .buy-button {
   padding-left: 25px;
   padding-right: 25px;
   padding-bottom: 25px; 
  }
  
  .buy-button a {
   display: inline-block;
   width: 100%;
   text-align: center;
   padding: 15px 25px; 
   text-decoration: none;
   background: #4ECDC4;
   color: #FFFFFF;
   border-radius: 2px;
  }
  
  .buy-button a:hover {
   background: #45B5AD; 
  }
  
  column-container,
  wrapper-container,
  column-three {
   display: block;
  }
  
  column-three {
   float: left;
  }
  
  column-container {
   overflow: hidden;
  }
  
  wrapper-container {
   overflow: hidden; 
  }
  
  column-three {
   width: 33.33%; 
  }
  
  
  @media screen and (max-width: 960px) {
   
   column-three {
    width: 50%; 
   }
    
  }
  
  @media screen and (max-width: 768px) {
   
   column-three {
    width: 100%; 
   }
   
  }
  
  @media screen and (max-width: 480px) {
   
   wrapper-container {
    width: 90%; 
   }
   
   .container .text {
    display: none; 
   }
   
   .buy-button {
    margin-top: 25px; 
   }
   
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;column-container&gt;
   &lt;wrapper-container&gt;
          &lt;column-three&gt;
           &lt;div class="container"&gt;
               &lt;h2&gt;Warcraft I&lt;/h2&gt;
                  &lt;div class="image"&gt;&lt;/div&gt;
                  &lt;div class="text"&gt;For ages, the fallen titan Sargeras plotted to scour all life from Azeroth. To this end, Sargeras possessed the human sorcerer Medivh.&lt;/div&gt;
                  &lt;div class="buy-button"&gt;
                   &lt;a href="#"&gt;Buy Now&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/column-three&gt;
          &lt;column-three&gt;
           &lt;div class="container"&gt;
               &lt;h2&gt;Warcraft II&lt;/h2&gt;
                  &lt;div class="image"&gt;&lt;/div&gt;
                  &lt;div class="text"&gt;The human nation of Stormwind had fallen before the Horde. Knight Champion Anduin Lothar gathered the scattered remnants of the human army and led the refugees north&lt;/div&gt;
                  &lt;div class="buy-button"&gt;
                   &lt;a href="#"&gt;Buy Now&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/column-three&gt;
          &lt;column-three&gt;
           &lt;div class="container"&gt;
               &lt;h2&gt;Warcraft III&lt;/h2&gt;
                  &lt;div class="image"&gt;&lt;/div&gt;
                  &lt;div class="text"&gt;The demonic Burning Legion prepare to launch their long-awaited assault on the mortal world. Survival is a matter of strategy.&lt;/div&gt;
                  &lt;div class="buy-button"&gt;
                   &lt;a href="#"&gt;Buy Now&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/column-three&gt;
          &lt;column-three&gt;
           &lt;div class="container"&gt;
               &lt;h2&gt;Warcraft I&lt;/h2&gt;
                  &lt;div class="image"&gt;&lt;/div&gt;
                  &lt;div class="text"&gt;The demonic Burning Legion prepare to launch their long-awaited assault on the mortal world. Survival is a matter of strategy.&lt;/div&gt;
                  &lt;div class="buy-button"&gt;
                   &lt;a href="#"&gt;Buy Now&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/column-three&gt;
          &lt;column-three&gt;
           &lt;div class="container"&gt;
               &lt;h2&gt;Warcraft II&lt;/h2&gt;
                  &lt;div class="image"&gt;&lt;/div&gt;
                  &lt;div class="text"&gt;The demonic Burning Legion prepare to launch their long-awaited assault on the mortal world. Survival is a matter of strategy.&lt;/div&gt;
                  &lt;div class="buy-button"&gt;
                   &lt;a href="#"&gt;Buy Now&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/column-three&gt;
          &lt;column-three&gt;
           &lt;div class="container"&gt;
               &lt;h2&gt;Warcraft III&lt;/h2&gt;
                  &lt;div class="image"&gt;&lt;/div&gt;
                  &lt;div class="text"&gt;The demonic Burning Legion prepare to launch their long-awaited assault on the mortal world. Survival is a matter of strategy.&lt;/div&gt;
                  &lt;div class="buy-button"&gt;
                   &lt;a href="#"&gt;Buy Now&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/column-three&gt;
      &lt;/wrapper-container&gt;
  &lt;/column-container&gt;</code></pre>
  </div>
  </div>
  </p>