Question

I have a relative positioned div with many absolute positioned img in it:

<div class="container">
     <img />
     <img />
</div>

.container{
    position: relative;
    border: 4px solid #ccc;
}
.container img
{
    position: absolute;
}

What am I trying to achieve? I’m using a jquery image fader plugin to fade in and out images.

The images show up but the .container does not stretch to the height. How do I fix this?

Answer 1

Absolutely positioned elements are taken out of normal flow and are not used to compute the height of other elements.

You have to set the height explicitly. Ideally by knowing the size of the images in advance and setting it in your stylesheet, or alternatively by measuring it with JavaScript.

Another option would be to replace absolute positioning with something else (what that something else might be would depend on the effect you are trying to achieve).