Expand div around children elements (no wrapper)

Question

From what I've seen this isn't possible w/o javascript. I have a series of images that are inside of a parent div. The images are pretty much limited to one size. I want the parent div to expand or shrink with the images. Right now it cuts off the images - I think because overflow:hidden;

this is the ID if you look with firebug:

<div id="zt-container" class="zt-container">

<http://www.zakweinberg.com/imagezoomtour>

I've tried percents and removing the height div.

CSS is the best. If not, I'm open to javascript.

Any help is appreciated.

Answer 1

Because your img.zt-current elements are position:absolute, your .zt-item divs are 0 height. On top of this, you have height: 450px on the .zt-container div. If you take off the absolute positioning on the images, and the fixed height on the container, the container will expand to fit the images. The problem is that it expands to show the images when they do their animated transition, which you probably don't want.

You'll probably have to change the height of the .zt-container div using javascript if you want to keep the animated transitions. Get the height of the image, and use it to set the height of the container. Something like:

$('.zt-container').animate({
    height: $('img.zt-current').height()
});

This looks similar to what you want: http://css-tricks.com/snippets/jquery/animate-heightwidth-to-auto/