Make absolutely positioned child expand its parent DIV (workaround)

Today I needed the following construct:

The blue box represents a div containing text and the orange box is an image, which, if the text was shorter than the image, should expand its parent DIV (Setup1). When smaller, it should be positioned in the lower right corner of its parent (Setup2). Also, the image should, depending on the width of the container, occasionally overlap the text. The pink-ish thing is the background of the container.

I came up with the following solution:

/* Needed styles */
div#container {
background: yellow;
position: relative;
width: 450px;
}

div#text {
background: blue;
}

div#image {
background: green;
position: absolute;
opacity: 0.8;
right: 0;
bottom: 0;
}

div#image2 {
float: right;
width: 1px;
visibility: hidden;

}

div.clear {
clear: both;
}

/* Dimensions: Setup 1 */

div#image.setup1 {
width: 300px;
}

div#image.setup1,
div#image2.setup1 {
height: 600px;
}

div#text.setup1 {
width: 200px;
height: 500px;
}

/* Dimensions: Setup 2 */

div#image.setup2 {
width: 300px;
}

div#image.setup2,
div#image2.setup2 {
height: 400px;
}

div#text.setup2 {
width: 200px;
height: 600px;
}

Short explanation: I created an additional container, which contains the exact same content as the one which is absolutely positioned. This container is right floated (from the text container), and given a width of 1px. Also it is hidden with “visibility: hidden;”

If you got a nicer way to do this, just let me know :)

If you want to play around with it, I created a jsFiddle for you.

Make absolutely positioned child expand its parent DIV (workaround)

One response to “Make absolutely positioned child expand its parent DIV (workaround)”

Leave a Reply Click here to cancel reply.