Absolute positioned elements inside a float

Question

I have a stack of imgs overlaying one-another which are shown/hidden as needed. For these images to overlap I am forced to use position:absolute(I am fading between them so I need at least two images on-top of one-another at a time). Their container div is floated, but the images' height varies so I cannot set a fixed height on this parent container. I need their container to accurately reflect their height as there is another floated div that clears the container which needs to sit below the image, whatever height it is.

Is there any way of achieving this without using javascript to adjust the height of the container appropriately for each image?

Here is a link to the page as it is at the moment. I am using images with identical heights but I would like to be able to vary the height of the images.

http://www.unwalked.com/

Answer 1

What if you don't make all the child images absolutely positioned, instead only temporarily set position: absolute; to the image that's being faded away? That way the container would naturally resize to fit active image.