title: Absolute position for child when parent uses float
body: <p>I am doing a setup where two images and a text container are side by side using float left, however I also need to use an overlay div with some text when the user hovers over, but this breaks the display.</p>
  
  <p>Here is my HTML code:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="parent-container"&gt;
      &lt;div class="child-container"&gt;
        &lt;img src="http://blog.hdwallsource.com/wp-content/uploads/2016/02/solid-color-wallpaper-21953-22506-hd-wallpapers.jpg" alt="" /&gt;
        &lt;div class="overlay"&gt;
          &lt;p&gt;Some text&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="child-container"&gt;
        &lt;img src="http://www.pixelstalk.net/wp-content/uploads/2016/06/Solid-Color-HD-Wallpapers-For-Desktop-768x432.jpg" alt="" /&gt;
      &lt;/div&gt;
      &lt;div class="child-container-text"&gt;
        &lt;p&gt;hhohdoioadoasabs&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is my CSS:</p>
  
  <pre><code>.parent-container {
    position: relative;
    width: 100%;
  }
  
  .child-container {
    float: left;
    position: relative;
    width: 30%;
  }
  
  .child-container img {
    position: absolute;
    height: 100px;
    width: 100%;
  }
  
  .child-container-text {
    background-color: #000;
    float: left;
    height: 100px;
    position: absolute;
    width: 40%;
  }
  
  .overlay {
    background-color: #FFF;
    opacity: 0.3;
    position: absolute;
    z-index: 999;
  }
  </code></pre>
  
  <p>And here is a CodePen with it: <a href="https://codepen.io/leofontes/pen/ORPJWd?editors=1100" rel="nofollow">https://codepen.io/leofontes/pen/ORPJWd?editors=1100</a></p>
  
  <p>Any idea why they are getting stacked? I had used the same trick of absolute positioning for overlays before and it worked, why is the float breaking it?</p>
  
  <p>Thank you</p>