caption box question

Hi Guys,
I've added a translucent? caption box to an image on my website
but I can't get it to appear at the bottom of the image, it keeps
floating to the top no matter what padding/margins I use.
The code I'm using is:

CSS

div.background{width:560px;height:112px;background:url(feeld2.jpg) repeat;}
div.transbox{width:560px;height:20px;background:#000;opacity:0.5;filter:alpha(opacity=50);}
div.transbox p{padding:1px 10px;color:#fff;}

HTML

<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>

ta in advance for any help,
cheers,
Mark

 

You could try adding top: 82px to the div.transbox or whatever pixels you require depending on how far you want it down.

On my phone so can't check it but hopefully should work.

 

What happens if you try this?

Code:

div.background{width:560px;height:20px; padding-top:92px; background :url(feeld2.jpg) repeat;}
div.transbox{width:560px;height:20px;background:#0 00;opacity:0.5;filter:alpha(opacity=50);}
div.transbox p{padding:1px 10px;color:#fff;}

 

This: http://jsfiddle.net/HSNne/

 

You know what happens-it works perfectly!
Thanks for the quick reply guys, problem solved.
Tricky, you usually do it for me but I couldn't get it to work on this
occasion (didn't know when you said top:82px whether or not you
meant padding-top or margin-top) but knowing the codemaster you
are I've probably done it wrong!
Cheers,
Mark.

 

Thanks for the reply Ashton that looks like a handy site.