title: Prevent column-count breaking inner elements
body: <p>I am trying to create a responsive image wrap gallery. Each image will have a header. I distribute them using  column-count of webkit. </p>
  
  <p>The problem is this: I've specified a container to be "relative". Inside that container, I have an "absolute" header followed by an image. What seems to be happening in some values of column-count is that the header is going to another column and the image in the next. I need them both to be together at all times and I'm surprised why the absolute within relative container is not doing that.</p>
  
  <p>A codepen for reference: <a href="http://codepen.io/pliablepixels/full/YwWLzy/" rel="nofollow">http://codepen.io/pliablepixels/full/YwWLzy/</a></p>
  
  <p>The core image gallery code is:(SO insists I include a code fragment when posting a codepen link, so here goes)</p>
  
  <pre><code>   &lt;div style="-webkit-column-count:{{ cols }};-webkit-column-gap:0px;line-height:0px;"&gt;
         &lt;span ng-repeat="image in images"&gt;
             &lt;div style="position:relative"&gt;
                 &lt;div class="my_header"&gt;Header&lt;/div&gt;
                 &lt;img class="scaled_image" src={{ image.src }} /&gt;
             &lt;/div&gt;
         &lt;/span&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>Please change the column values and note the header behavior.</p>
  
  <p>How does one solve this? (Note I must use an img tag - can't use background-image)</p>
  
  <p>thanks</p>