Question

I have the following html:

<div class="container">
    <img src="..."/>
    <p>Heading</p>
</div>

I want this behaviour:

• If there is no image (no <img> tag) the p should dictate the size of the .container.
• If there is an image, but the p is taller the .container should be as tall as the p.
• If the image is taller the .container should be as tall as the image and the p should “grow” from the bottom of .container and up depending on the amount of text in it (like position:absolute; bottom:0 inside a position:relative box).
• The p should have a background that should be semi transparent so you can partially see the image through the element. The transparency is not the issue, but I include this as I don’t want a solution that makes the p take the full height of the .container and then repositions the text.
• It has to work in IE8 (only required browser).
• I can freely manipulate the html structure if needed, but I’d like to keep it as simple as possible.

I can do it trivially with javascript, but is it possible to do with pure CSS?

(this codepen shows partially what I’m trying to do: http://codepen.io/anon/pen/sqjnz)

Edit for clarification: I want .container to be as tall as the tallest child (img or p). If both the img and p are present the text should be on top of the image and anchored at the bottom of .contianer so as it grows it covers more and more of the image. If there is no image (the img tag is not present) the box should behave like a normal div and expand to the same size as the p.

Answer 1

Is this what you’re after?

<div class="container">
    <img src="http://lorempixel.com/100/100"/>
    <p>Heading</p>
</div>​

and CSS:

.container {
    /* these are just set so we can see the size of container */
    margin: 20px;
    padding: 5px;
    background-color: #eee;
}
.container img {
    margin-right: -100px;
    vertical-align: bottom;
}
.container p {
    display: inline-block;
    width: 100px;
    background-color: rgba(0,0,0,.75);
    line-height: 1em;
    color: #fff;
    vertical-align: bottom;
}​

And to accomodate IE into the mix with semi-transparency I suggest you read Lea Verou’s blog post.