CSS - parent div does not expand to width / height of child

Question

I want to overlay the image. I managed to do this, but the image is expanding from the parent div .

I have a div containing inline-block , since I want it to be "automatic size" and not occupy width: 100% . If you look at the current output, you will see that the image may be within the frame with a black edge.

It only needs to work in Chrome if you encounter problems with multiple browsers.

Thanks in advance!

Live demo

---

CSS

 #body_content { border: solid 1px blue; display: inline-block; padding: 5px; } #body_header { border: solid 1px red; font-size: 25px; padding: 5px; } #body_image { position: absolute; } #body_image_caption { color: white; line-height: 30px; margin-left: 10px; } #body_image_container { background: white; border: solid 1px black; margin-top: 3px; padding: 10px; } #body_image_overlay { background-color: black; bottom: 5px; display: block; height: 30px; opacity: 0.85; position: absolute; width: 100%; }​ 

HTML:

 <div id="body_content"> <div id="body_header"> Heading </div> <div id="body_image_container"> <div id="body_image"> <img src="http://i.imgur.com/s6G8n.jpg" width="200" height="200" /> <div id="body_image_overlay"> <div id="body_image_caption"> Some Text </div> </div> </div> </div> </div> 

Answer 1

The #body_image element exits #body_image_container because its position set to absolute . Absolutely positioned elements are removed from the document stream, causing the parent elements to collapse as if there was no child element. If you change it to relative , it will be contained in a black box:

 #body_image{ position: relative; } 

http://jsfiddle.net/AaXTm/2/

Answer 2

Try this css in the parent div.

 Overflow:auto 

Answer 3

Check out this script. You need to set the position of the child element of the image as absolute, and the parent element as relative. Resize the title bar accordingly.

 child-element { position:absolute; } parent-element { position:relative } 

http://jsfiddle.net/AaXTm/4/