Currently, I am attempting to stack multiple divs along with their content atop each other while ensuring the containing div (#stack) remains in the normal flow of the document by implementing the following technique:
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>
While this setup is functional, I have noticed that the div#stack currently has a width and height of 0. It would be preferable for it to adjust its size dynamically based on the largest child element.
Your assistance in addressing this issue is greatly appreciated. Thank you!