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>
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 ).
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.
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.
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.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With