title: how to center various width images while having a block of text flush right of each image?
body: <p>I have an image gallery where I want the images horizontally centered on the page.  I want to have the image meta data, title, artist-name etc, positioned just to the right of that image.  </p>
  
  <p>First I tried floating the image and the meta_data side by side inside a containing div, but then the image is no longer centered according to the page because the overall containing div width is used for centering.  Also, I don't know the width of the containing div should be since I don't know the width of the image, it's dynamic.  I prefer not to set a hardcoded width on the div because I want to let the image scale down depending on the devise.</p>
  
  <p>Then I tried using <code>display:table display:row display:cell</code>, where the image was in the left cell and the meta data was in the right cell.  The table would stretch to the width of the image, which was great.  I then put <code>position:relative</code> on the meta data table-cell and then <code>positive:absolute</code> the a div which contained the meta data off to the right.  This worked great in most browsers but didn't display correctly in FF.  I found that <code>table-cell</code> and <code>position:relative</code> didn't mix well... even if the <code>position:relative</code> was nested in a different element.</p>
  
  <p>So then I tried putting both the image and meta data elements in a containing div that was <code>display:inline-block; positive:relative</code>.  Again this stretched around my content without extending all the way to the max width, the way a regular <code>display:block</code> does, which was great.  Again I positioned the meta data absolutely to the right.  It looks great in chrome, ff and safari... BUT, now my dynamic image scaling breaks.  I had size the image <code>max-width:100%</code> so that it will scale down for mobile devices.  But in FF this doesn't work.  I supposed the image can't get a read on what the width is on the inline-block?  I tried putting another div around the image that was <code>display:block</code> but that still doesn't work.</p>
  
  <p>What is a good way of centering the images, yet have a piece of text positioned flush to its right, yet still have image respond to <code>max-width:100%</code> when scaled?</p>
  
  <p><a href="http://www.sketchfemme.com/popular" rel="nofollow">Example</a> of what I have so far: </p>