Right-aligning text under images (without javascript)

Question

I need some advice in creating a caption underneath an image, that is aligned to the right hand side. The image will change, so I can't use fixed value margins or anything like that - is this possible without javascript?

This is the basic layout, 'text-align: right' would work if I could somehow force the wrapper div to constrain to the image width, but currently it breaks past this. Any advice?

<style>
#section{height: 74%; padding-left:5%;}
    #photowrapper{position:relative;}
        #photo{height:100%; width:auto;}
        #detailsdiv{position:relative; text-align:right;}
</style>

<div id='section'>
    <div id='photowrapper'>       
        <img id='photo' src=../imgs/banan.jpg></img>
        <div id= 'detailsdiv'>banan</div>
    </div>
</div>

Maybe an obvious question but it hasn't been asked that I can see.

Answer 1

Just add display: inline-block; to the #photowrapper CSS

#photowrapper{
    position:relative;
    display:inline-block;
}

Fiddle: http://jsfiddle.net/DyrS9/

Answer 2

You can add display:table-cell (or table,inline-block) to #photowrapper :

#photowrapper{
    position:relative;
    display:table;
}

Example