Despite finding similar questions answered here, I am still struggling to make this work.
I have two parent divs - one acts as a frame with a border and padding, the other has a solid black background, and the third is where a transparent image will be placed. I need both parent divs to adjust their height based on the image's height.
I have managed to achieve this for the div with the black background, but I'm unable to get the parent div with the border to expand properly:
Check out the fiddle here: http://jsfiddle.net/vpdj4kst/
#builder_container {
width: 100%;
/*overflow: auto;*/
position: relative;
padding: 8px;
border: 1px solid #ccc;
margin-bottom: 15px;
display: inline-block;
clear: both;
}
#builder_contents {
background: #000;
width: 100%;
height: 100%;
position: relative;
display: block;
}
.builder_img {
width: 100%;
height: auto;
position: absolute;
}<div id="builder_container">
<div id="builder_contents">
<img class="builder_img" src="image.png" />
</div>
</div>