Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

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>
like image 426
user887515 Avatar asked Dec 23 '12 16:12

user887515


People also ask

How do you stretch a div to fit a parent?

If you want the child divs to fit the parent size, you should put a margin at least of the size of the child borders on the child divs ( child. margin >= child. bordersize ).

How do I make my div take 100% height of parent div?

Answer: Set the 100% height for parents too And we all know that the default value of the height property is auto , so if we also set the height of <body> and <html> elements to 100%, the resulting height of the container div becomes equal the 100% height of the browser window.

How do I make a div fit my screen height?

Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.

How do I force a div to full width?

The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.


1 Answers

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/

like image 129
cimmanon Avatar answered Sep 21 '22 03:09

cimmanon