title: CSS two column layout breaks the last div of first column
body: <p>I want to create a two-column gallery of photos, each with a different height, and with a footer with some explanation.</p>
  
  <p>I have created the two column section, a card container, and placed inside this one the image and a div with the footer.</p>
  
  <p>The result in Chrome shows the last card container of the first column to be broken, i.e. separated in two: on the first column the image, on the second column the footer.</p>
  
  <p><a href="https://i.imgur.com/nVAFBB0.jpg" rel="nofollow noreferrer">https://i.imgur.com/nVAFBB0.jpg</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#columns {
    line-height: 0;
    display: block;
    column-count:         2;
    column-gap:           100px;
  
    }
  
    #columns .container {
      width: 100% ;
      height: auto ;
      margin-bottom: 15px;
      border-radius: 15px;
      border-width: 1px;
      background-color: lime;
      padding: 3px;
      overflow:hidden;
  
    }
  
    #columns img {
      overflow: hidden;
    }
  
  
    .footer{
      color: darkslategrey;
      position: relative;
      margin: 5px;
      bottom: 0px;
      right: 0px;
      text-align:center;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id="columns"&gt;
  &lt;div class="container"&gt;
    &lt;img  src="http://via.placeholder.com/350x150"&gt;
    &lt;div class="footer"&gt;
      &lt;img  src="http://via.placeholder.com/50x50"&gt;
      Footer #1
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
    &lt;img  src="http://via.placeholder.com/350x120"&gt;
    &lt;div class="footer"&gt;
      &lt;img  src="http://via.placeholder.com/50x50"&gt;
      Footer #2
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
    &lt;img  src="http://via.placeholder.com/350x130"&gt;
    &lt;div class="footer"&gt;
      &lt;img  src="http://via.placeholder.com/50x50"&gt;
      Footer #3
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Help much appreciated :)</p>