Can't figure out why my div.partner-item will not take the height of it's child elements. Check out my fiddle here https://jsfiddle.net/edjcqkke/2/. If you inspect the 'partner-item' div you can see that it does not have the height of its children elements. I have cleared my floats but still can't get the parent height to recognize its children's height. My html structure:
<div id="partner-container" class="standard small container">
<div class="partner-item">
<div class="flipper">
<div class="front">
<img class="logo" src="http://fillmurray.com/300/150">
<h2>Test Page</h2>
<p>www.googlre.vi9m</p>
</div>
</div>
</div>
<div class="partner-item">
<div class="flipper">
<div class="front">
<img class="logo" src="http://fillmurray.com/300/150">
<h2>new-item</h2>
<p>http://www.google.com</p>
</div>
</div>
</div>
<div class="partner-item">
<div class="flipper">
<div class="front">
<img class="logo" src="http://fillmurray.com/300/150"><h2>partner-item</h2><p>undefined</p>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
Your <div class="front"> has position: absolute property. So it doesn't take any space from the parent element. That's why <div class="flipper"> doesn't recognize it's child's height.