title: How to make a description box "fit" inside an image width HTML
body: <p>So i have an image, I have a text box with a transparent background that is overlaid on the image (FYI it contains the price of the item and if it is onsale).
  I would like the text box to "fit" the width of the image it is over.
  Currently the text is wider than the image. I've tried adjusting the width but that only seems to shrink it and move the box out from being over the image.</p>
  
  <p><a href="http://jsfiddle.net/Ggqy4/" rel="nofollow">http://jsfiddle.net/Ggqy4/</a></p>
  
  <p>Here is what I'm aiming to create. Notice the text is only as wide as the image.
  <a href="http://imgur.com/zKzjIyF" rel="nofollow">http://imgur.com/zKzjIyF</a></p>
  
  <p>The red box inside the box is on the first item on the left, the girl in the vest.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="date-container"&gt;
  &lt;div class="date-heading" style="display: block;"&gt;Friday, Oct 11, 2013&lt;/div&gt;
  &lt;div class="items-purchased-container"&gt;
      &lt;DIV style="position: absolute; top:10px; left:355px; width:200px; height:25px"&gt;3&lt;/span&gt;&amp;nbsp;items purchased&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="total-spend-container"&gt;
          &lt;div class="product"&gt;
              &lt;img src="https://theory.alluringlogic.com/api/v1/productvariation/3/1058.jpg?preset=XS" alt="" /&gt;
              &lt;div class="description"&gt;
                  &lt;p&gt;Sex shirt in sparkly black &lt;span class="price"&gt;Price $500&lt;/span&gt;
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="product"&gt;
              &lt;img src="https://theory.alluringlogic.com/api/v1/productvariation/3/1058.jpg?preset=XS" alt="" /&gt;
              &lt;div class="description"&gt;
                  &lt;p&gt;Sex shirt in sparkly black &lt;span class="price sale"&gt;Sale Price $500&lt;/span&gt;
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
  background:#00000;
  text-align:center;
   }
  .product {
  display:inline-block;
  position:relative;
  margin-right:10px;
  vertical-align:top;
  }
  .product img {
  display:block;
  max-width:100%;
  }
  .description {
  position:absolute;
  background:rgba(255, 255, 255, 0.75);
  top:60%;
  ;
  text-align:center;
  width:100%;
  }
  .description span {
  display:block;
  margin-top:10px;
  padding:5px;
  }
  .sale {
  background:red;
  }
  </code></pre>