title: Extra space at the bottom of CSS columns
body: <p>I have a container that has images inside. I use CSS columns and media queries to determine my layout. I put a paragraph tag at the bottom and noticed extra space at the bottom of it. Here's what i'm talking about in this fiddle. <a href="http://jsfiddle.net/sEe7x/11/" rel="nofollow">http://jsfiddle.net/sEe7x/11/</a>. The weirdness is happening at the yellow and orange break points. Does anyone know what is causing this?</p>
  
  <p>Here's my code</p>
  
  <pre><code>-- HTML --
  
  &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
      &lt;meta name="viewport" content="width=device-width" /&gt;
  
      &lt;title&gt;Portraits&lt;/title&gt;
      &lt;meta name="description" content=""&gt;
  
      &lt;link href='http://fonts.googleapis.com/css?family=Raleway:200' rel='stylesheet' type='text/css'&gt;
  
  
  &lt;/head&gt;
  &lt;body class="photography"&gt;
      &lt;nav class="site_navigation cf"&gt;
      &lt;ul id="nav_drop" class="nav_links cf"&gt;
          &lt;li class="nav_home"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav_blog"&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav_photography"&gt;&lt;a href="#"&gt;Photography&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav_projects"&gt;&lt;a href="#"&gt;Projects&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav_contact"&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
          &lt;div class="main photography_wrapper"&gt;        
  
  
  
              &lt;h1&gt;Portraits&lt;/h2&gt;
  
              &lt;div class="gallery_wrapper"&gt;
                      &lt;a href="#"&gt;&lt;img src="http://placedog.com/400/400" alt=""&gt;&lt;/a&gt; 
                      &lt;a href="#"&gt;&lt;img src="http://placedog.com/400/400" alt=""&gt;&lt;/a&gt; 
                      &lt;a href="#"&gt;&lt;img src="http://placedog.com/400/400" alt=""&gt;&lt;/a&gt; 
                      &lt;a href="#"&gt;&lt;img src="http://placedog.com/400/400" alt=""&gt;&lt;/a&gt; 
                      &lt;a href="#"&gt;&lt;img src="http://placedog.com/400/400" alt=""&gt;&lt;/a&gt; 
                      &lt;a href="#"&gt;&lt;img src="http://placedog.com/400/400" alt=""&gt;&lt;/a&gt; 
                      &lt;a href="#"&gt;&lt;img src="http://placedog.com/400/400" alt=""&gt;&lt;/a&gt; 
                      &lt;a href="#"&gt;&lt;img src="http://placedog.com/400/400" alt=""&gt;&lt;/a&gt; 
                      &lt;a href="#"&gt;&lt;img src="http://placedog.com/400/400" alt=""&gt;&lt;/a&gt;                
                      &lt;a href="#"&gt;&lt;img src="http://placedog.com/400/400" alt=""&gt;&lt;/a&gt; 
                      &lt;a href="#"&gt;&lt;img src="http://placedog.com/400/400" alt=""&gt;&lt;/a&gt; 
                      &lt;a href="#"&gt;&lt;img src="http://placedog.com/400/400" alt=""&gt;&lt;/a&gt; 
                      &lt;a href="#"&gt;&lt;img src="http://placedog.com/400/400" alt=""&gt;&lt;/a&gt; 
                      &lt;a href="#"&gt;&lt;img src="http://placedog.com/400/400" alt=""&gt;&lt;/a&gt; 
                      &lt;a href="#"&gt;&lt;img src="http://placedog.com/400/400" alt=""&gt;&lt;/a&gt; 
                      &lt;a href="#"&gt;&lt;img src="http://placedog.com/400/400" alt=""&gt;&lt;/a&gt; 
                      &lt;a href="#"&gt;&lt;img src="http://placedog.com/400/400" alt=""&gt;&lt;/a&gt; 
                      &lt;a href="#"&gt;&lt;img src="http://placedog.com/400/400" alt=""&gt;&lt;/a&gt; 
                      &lt;a href="#"&gt;&lt;img src="http://placedog.com/400/400" alt=""&gt;&lt;/a&gt; 
                      &lt;a href="#"&gt;&lt;img src="http://placedog.com/400/400" alt=""&gt;&lt;/a&gt; 
              &lt;/div&gt;
  
              &lt;p&gt;Random collection of portraits.&lt;/p&gt;
  
  
  
              &lt;div class="more_galleries"&gt;
                  &lt;h2&gt;More Galleries&lt;/h2&gt;
                  &lt;div class="more_gallery_photos"&gt;
                      &lt;a href="#"&gt;&lt;img src="http://placedog.com/400/400" alt=""&gt;&lt;/a&gt; 
                      &lt;a href="#"&gt;&lt;img src="http://placedog.com/400/400" alt=""&gt;&lt;/a&gt; 
                      &lt;a href="#"&gt;&lt;img src="http://placedog.com/400/400" alt=""&gt;&lt;/a&gt; 
                      &lt;a href="#"&gt;&lt;img src="http://placedog.com/400/400" alt=""&gt;&lt;/a&gt;                &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://dev.danielcgold.com/js/selectnav.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://dev.danielcgold.com/js/functions.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;​
  
  
  -- CSS --
  
  * {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -ms-box-sizing: border-box;
      box-sizing: border-box;
  }
  
  .cf:before,.cf:after {
      content: "";
      display: table;
  }
  
  .cf:after {
      clear: both;
  }
  
  .cf {
      *zoom: 1;
  }
  
  img {
      max-width: 100%;
  }
  
  body {
      font-family: Arial, sans-serif;
      font-size: 100%;
      background: #fffff6;
      margin: 0;
      padding: 2em;
      padding-top: 6.375em;
      color: #252525;
  }
  
  h1,h2,h3,h4,h5,h6 {
      font-family: serif;
      font-weight: normal;
      margin-bottom: 1em;
  }
  
  h1 {
      font-size: 3em;
  }
  
  p {
      line-height: 1.5em;
      word-wrap: break-word;
  }
  
  strong {
      font-family: 'pt_sans_captionbold', sans-serif;
      font-weight: normal;
  }
  
  a {
      color: #ff830a;
      text-decoration: none;
  }
  
  a:hover {
      text-decoration: underline;
  }
  
  .selectnav {
      display: none;
  }
  
  .site_navigation {
      font-family: 'Raleway', sans-serif;
      font-weight: 200;
      background: #fff;
      padding: 1em;
      border-bottom: 0.063em solid rgba(0,0,0,0.15);
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 4.375em;
      -moz-box-shadow: rgba(0,0,0,0.15) 0 0 0.4em;
      -webkit-box-shadow: rgba(0,0,0,0.15) 0 0 0.4em;
      -o-box-shadow: rgba(0,0,0,0.15) 0 0 0.4em;
      box-shadow: rgba(0,0,0,0.15) 0 0 0.4em;
  }
  
  .site_navigation a {
      text-decoration: none;
      color: #444;
      display: block;
      margin: .5em;
      padding-bottom: .25em;
  }
  
  .nav_links {
      list-style: none;
      margin: 0;
      padding: 0;
      float: right;
  }
  
  .nav_links li {
      float: left;
  }
  
  .gallery_wrapper {
      -moz-column-count: 5;
      -webkit-column-count: 5;
      -o-column-count: 5;
      column-count: 5;
      line-height: 0;
  }
  
  .more_galleries {
      margin-top: 6em;
  }
  
  .more_gallery_photos {
      -moz-column-count: 5;
      -webkit-column-count: 5;
      -o-column-count: 5;
      column-count: 5;
  }
  
  .more_gallery_photos a {
      display: block;
      margin-bottom: 1em;
  }
  
  .gallery_wrapper a {
      display: block;
      margin-bottom: 1em;
  }
  
  .gallery_wrapper img {
      display: block;
      height: auto;
  }
  
  
  @media screen and (max-width: 60em) {
  
      .gallery_wrapper {
          -moz-column-count: 4;
          -webkit-column-count: 4;
          -o-column-count: 4;
          column-count: 4;
      }
  
      .more_gallery_photos {
          -moz-column-count: 4;
          -webkit-column-count: 4;
          -o-column-count: 4;
          column-count: 4;
      }
  
      .gallery_wrapper a {
          margin-bottom: 1em;
      }
  
      .more_gallery_photos a {
          display: block;
          margin-bottom: 1em;
      }
  }
  
  @media screen and (max-width: 48em) {
  
      .nav_links {
          float: left;
      }
  
      .gallery_wrapper {
          -moz-column-count: 3;
          -webkit-column-count: 3;
          -o-column-count: 3;
          column-count: 3;
      }
  
      .more_gallery_photos {
          -moz-column-count: 3;
          -webkit-column-count: 3;
          -o-column-count: 3;
          column-count: 3;
      }
  
      .gallery_wrapper a {
          margin-bottom: 1em;
      }
  
      .more_gallery_photos a {
          display: block;
          margin-bottom: 1em;
      }
  }
  
  @media screen and (max-width: 30em) {
      .site_navigation {
          height: 3.5em;
      }
  
      .nav_links {
          display: none;
      }
  
      .selectnav {
          display: block;
          margin-left: 1.5em;
      }
  
      .gallery_wrapper {
          -moz-column-count: 1;
          -webkit-column-count: 1;
          -o-column-count: 1;
          column-count: 1;
      }
  
      .more_gallery_photos {
          -moz-column-count: 2;
          -webkit-column-count: 2;
          -o-column-count: 2;
          column-count: 2;
      }
  
      .more_gallery_photos a {
          display: block;
          margin-bottom: 1em;
      }
  }​
  ​
  </code></pre>
  
  <p>EDIT: The first fiddle was solved. I updated a JS fiddle with my real code stripped down and recreated the issue. I use SASS so the CSS is the output.</p>