CSS - parent div is not expanding to width/height of child

Question

I am looking to overlay a caption on to an image. I have managed to do this, but the image is expanding out of the parent div.

I have the containing div set to inline-block, as I want it to 'auto size', not take up width: 100%. If you look at the current output, you'll see the image could be within the black bordered box.

It only needs to work in Chrome, if you encounter cross-browser issues.

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>

I think you should assign `inline-block` to the `body-image`, otherwise the browser gets confused which width to use. Can't check now. — Mr Lister, Dec 23 '12 at 16:43
there are many reasons why this might happen, to see a few, try this question: http://stackoverflow.com/questions/450903/make-div-width-equal-to-child-contents — Nacht, Dec 08 '14 at 03:58

score 20 · Accepted Answer · edited Nov 27 '13 at 00:56

The #body_image element is escaping from the #body_image_container because its position is set to absolute. Absolutely positioned elements are removed from the document's flow, causing parent elements to collapse as though the child element wasn't there. If you change it to relative, then it becomes contained within the black box:

#body_image{
    position: relative;
}

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

score 8 · Answer 2 · answered Oct 08 '13 at 19:16

8

Try this css in parent div.

Overflow:auto

answered Oct 08 '13 at 19:16

Nalan Madheswaran

10,136
1
57
42

Worked well for me, but should be `overflow: auto;` (lowercase). Edit: `display: inline-block;` from comments above was better, avoiding unnecessary scrollbars. – programmingisphun Feb 04 '21 at 14:13

score 2 · Answer 3 · edited Nov 27 '13 at 00:56

2

Check this fiddle. You need to set the position of the child element of the image to be absolute and the parent element to be relative. Change the width of the caption accordingly.

child-element {
    position:absolute;
}

parent-element {
    position:relative
}

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

edited Nov 27 '13 at 00:56

KyleMit

30,350
66
462
664

answered Dec 23 '12 at 18:52

Sumit Gera

1,249
4
18
34

CSS - parent div is not expanding to width/height of child

3 Answers3