Why is my DIV smaller than its contents?

Answer 1

By setting the position of the image to absolute, you remove it from the flow of the document (where the rest of the text is) and lay it on top.

Edited:

I adjusted the CSS to:

        #slideshow {
            position:relative;
            height:1000px;
        }

        #slideshow img {
            position:absolute;
            width: 50%;
            top:0;
            left:0;
            z-index:8;
            display: none;
        }

        #slideshow img.active {
            z-index:10;
            display: inline;
        }

        #slideshow img.last-active {
            z-index:9;
            display: inline;
        }

Perhaps that's more like what you want. You'll need to come up with a sane height that matches the bulk of your content, but that seemed to fade pictures in and out with a minimum of "popping" when they got to the end of their cycle.

Answer 2

The absolute positioning is the reason the images are over the text (since nothing is giving the #slideshow <div> any height), but your system needs the images to be absolutely positioned in order to stack them on top of each other for the slideshow effect. Since you are using jQuery anyway, you can programmatically expand the container <div> to the height of the largest image.

var maxHeight = 0;
$("#slideshow img").each(function(){
    if (maxHeight < $(this).height()) {maxHeight = $(this).height()}
});
$("#slideshow").height(maxHeight);

I'm sure someone can point out a more elegant way to write the maxHeight part of the script!