CSS positioning, overlaying divs in fluid layout - css

Question

It's my first time designing a fluid layout and one of the things I'm trying to do is overlay a caption at the bottom of a photo. The method I'm using is having the photo (width:100%) inside a div (width:50%) and adding a div containing the caption under the photo. To get it to overlay, I made the caption's height a static 30px and set the position as relative and top -50px (+padding).
CSS:
#contentdiv {
width:50%;
}
#gallerydescription {
height:30px;
padding:10px;
background-image:url(../contentbkg.png);
position:relative;
top:-50px;
margin-bottom:-50px;
}
HTML:
<div id="contentdiv">
<img src="blog/1.gif" width="100%" />
<div id="gallerydescription">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum urna nec urna varius varius.
</div>
</div>
This does what I want visually, but it's not really a true fluid layout and it looks ugly if the caption is too or too short. Is there a way where I could let the length of the caption to determine the height of the caption div and have the "top" be the negative of whatever the height and padding is?

Answer 1

Pure CSS solution for a problem like the one you have
CSS
#contentdiv{
width: 50%;
position: relative;
}
#gallerydescription{
padding: 10px;
background-image: url('../contentbkg.png');
box-sizing: border-box;
-moz-box-sizing: border-box;
position: absolute;
bottom: 0;
width: 100%;
max-height: 60%;
overflow: hidden;
}
Markup (unchanged)
<div id="contentdiv">
<img src="blog/1.gif" width="100%" />
<div id="gallerydescription">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum urna nec urna varius varius.
</div>
</div>
Update
jsfiddle try this fiddle

Answer 2

Try this and see how it looks like:
#contentdiv {
width:50%;
position: relative
}
#gallerydescription {
height:30px;
padding:10px;
background-image:url(../contentbkg.png);
position:absolute;
left: 0; right: 0; bottom: 0;
z-index: 5;
}

Answer 3

You could try jQuery UI Position for that purpose.
It allows to position two elements relatively, like
$("#elementToPosition").position({
my: "left top",
at: "right bottom",
of: "#targetElement"
});
And then change the top property for overlaying :
$("#elementToPosition").css('top',$("#elementToPosition").css('top') - 10px);