Add overlay to image with CSS?

Question

I have a image that I want to display a DIV on the bottom with some text. I know it's really easy, but since this is a mobile website and all the images are different sizes, I have to make it 100% width which makes everything messes everything up with you float images, etc.

This is what I have right now:

HTML

<div class='individual_picture_capption_wrapper'>
<div class='individual_picture_capption_wrapper_two'>
<div class='individual_picture_caption_wrapper_three'><div class='individual_picture_caption'>Some Caption Here</div></div>
<img src='http://myflashpics.com/get_image.php?short_string=8ibjr&size=big' class='individual_picture_big' />
</div>
</div>

CSS

.individual_picture_caption {
    padding: 12px 10px 12px 10px;
    font-size: 13px;
    text-align: center;
}
.individual_picture_capption_wrapper {
    position: relative;
    background-color: #ffffff;
}
.individual_picture_capption_wrapper_two {
    margin-left: 0px;
    background-color: #cccccc;
}
.individual_picture_caption_wrapper_three {
    float: left;
    position:absolute;
    width: 100%;
    left: 0;
    background-image: url('http://myflashpics.com/viewer/images/transparent_black_70.png');
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #ffffff;
    margin: 15px 30px 15px 15px;
} 

My problem is that I want it to float on the bottom and the caption is hanging over the edge. I know it's because of my margin on the left.

Please help! I don't know where to go from here. If you want it to see it in action, click here .

Thanks!

Answer 1

If you want the caption at the bottom you need to modify your CSS for the margin and position in this way:

.individual_picture_caption_wrapper_three {
    margin: 0 0 7px 7px;
    bottom:0;
}

Answer 2

Scratch the margin; add bottom:15px; and set width:auto; left:20px; right:10px width:auto; left:20px; right:10px