Place footer below taller of two overlapping elements in CSS - html

Question

I have a block of text that goes on top of a picture. Then below this there is a footer. But the text comes from a database, so sometimes the text is taller than the picture and sometimes shorter. I want the footer to come below the "whole thing" in either case.
Like this -- imagine the XXX's are the picture
Scenario 1:
XXXXXXXXXXXXXXXX
XXXX Short XXXX
XXXX text XXXX
XXXXXXXXXXXXXXXX
-- Footer --
Scenario 2:
XXXXXXXXXXXXXXXX
XXXX Long XXXX
XXXX text XXXX
XXXX runs XXXX
past
the
picture.
-- Footer --
It's easy enough to put the text on top of the picture with position: absolute for one or the other. But then the footer gets positioned without regard to the absolute element.
At the moment I've got two different versions of the screen, one where the picture is static and the text is absolute, for cases where I expect the text to be longer; and one where the text is static and the picture is absolute, for cases where the text is longer. This works, but only because I know what data is in the database today. I could have the program examine the text, but I have no way to know how tall it will lay out without knowing the size of the window the user sets for his browser, not to mention font sizes, etc.
Maybe position: absolute isn't the right way to do this?
Update *
Someone suggested I make a fiddle. I was about to, but I see Adam B Smith made one that illustrates my problem very well: http://jsfiddle.net/DIRTY_SMITH/EgLKV/6183/
That fiddle looks great if the text is taller than the image. Now delete a bunch of text so that the text is shorter than the image, and you see the footer overlaps the image.

Answer 1

OK this one will do it for you http://jsfiddle.net/DIRTY_SMITH/EgLKV/6185/
lol
#container{min-height: 400px;}
#image
{
position:absolute;
z-index:-9999;
left:0;
top:0;
}
#text
{
z-index:9999;
width: 200px;
color:red;
font-size:24px;
font-weight:bold;
}
.footer {
background:#ffab62;
width:100%;
height:100px;
z-index:9999;
bottom:0;
left:0;
}

Answer 2

If you know the size of the image, and set the container's size same as the image, it does work.
.container {
border: 1px solid red;
position: relative;
display: table;
width: 250px;
height: 193px;
}
.container img {
position: absolute;
z-index: -1;
}
.container span {
background: rgba(255,255,255,.7);
display: table;
width: 80%;
margin: auto;
margin-top: 25%;
margin-bottom: 5%;
}
.footer {
background: pink;
}
<div class="container">
<img src="http://albanyvisitors.com/WpContents/wp-content/uploads/2015/06/200px-Big-Lake-Big-Sky-Mt-Washington-by-Bill-Origer-2015-photo-contest.jpg" />
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
</div>
<div class="footer">foooooooter</div>
<br>
<div class="container">
<img src="http://albanyvisitors.com/WpContents/wp-content/uploads/2015/06/200px-Big-Lake-Big-Sky-Mt-Washington-by-Bill-Origer-2015-photo-contest.jpg" />
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>
<div class="footer">foooooooter</div>