Question

Ok, I’m trying to take several divs and all their content, and stack them on top of each other and make the containing div (#stack) appear in the normal flow of things via the following method:

CSS:

#stack
{
    position:relative;
    display:block;
}
#stack div
{
    position:absolute;
    left:0;
}

HTML:

<div id="stack">
    <div>
        <img src="images/1.jpg">
        <p>
            First Image
        </p>
    </div>
    <div>
        <img src="images/2.jpg">
        <p>
            Second Image
        </p>
    </div>
    <div>
        <img src="images/3.jpg">
        <p>
            Third Image
        </p>
    </div>
    <div>
        <img src="images/4.jpg">
        <p>
            Fourth Image
        </p>
    </div>
</div>

Which works, except now div#stack has a width/height of 0. I would like it to be the same size as its largest child.

Thanks in advance for the help!

Answer 1

As you are taking the inner divs out of the document’s flow with position: absolute;, the outer div cannot in any case stretch to the dimensions of the biggest child. You have to use javascript to achieve that effect. If you’re familiar with jQuery, you could use something like this:

var w = false, h = false;

$('#stack div').each(function() {
    w = $(this).width() > w || !w ? $(this).width() : w;
    h = $(this).height() > h || !h ? $(this).height() : h;
});

$('#stack').css({
    width: w,
    height: h
});