How to make a description box "fit" inside an image width HTML - html

Question

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.
http://jsfiddle.net/Ggqy4/
Here is what I'm aiming to create. Notice the text is only as wide as the image.
http://imgur.com/zKzjIyF
The red box inside the box is on the first item on the left, the girl in the vest.
HTML:
<div class="date-container">
<div class="date-heading" style="display: block;">Friday, Oct 11, 2013</div>
<div class="items-purchased-container">
<DIV style="position: absolute; top:10px; left:355px; width:200px; height:25px">3</span> items purchased</p>
</div>
<div class="total-spend-container">
<div class="product">
<img src="https://theory.alluringlogic.com/api/v1/productvariation/3/1058.jpg?preset=XS" alt="" />
<div class="description">
<p>Sex shirt in sparkly black <span class="price">Price $500</span>
</p>
</div>
</div>
<div class="product">
<img src="https://theory.alluringlogic.com/api/v1/productvariation/3/1058.jpg?preset=XS" alt="" />
<div class="description">
<p>Sex shirt in sparkly black <span class="price sale">Sale Price $500</span>
</p>
</div>
</div>
CSS:
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;
}

Answer 1

Here is a JSFiddle file for your review: CLICK HERE
As mentioned above by Giovanni Silveira, your images contain a large left/right border. You can either crop in your favorite image editor or you will have to manipulate your code to accommodate the added area to your liking.
I did add some changes to force the appearance you were looking for, however if you want a less intrusive set up then it would be prudent to change you images to fit your needs.
To view how the page was set up, just add
border: 1px solid #ccc;
to your product and description classes to see the flow and gain a better understanding of the images impact on flow of document.
Hope this helps.
Here is the code:
HTML:
<div class="orderinfo">
<div class="date">Friday, Oct 11, 2013</div>
<div class="purchaseitems">3 items purchased</div>
</div>
<div class="total-spend-container">
<div class="product">
<img src="https://theory.alluringlogic.com/api/v1/productvariation/3/1058.jpg?preset=XS" style="width:300px;height:250px" alt="" />
<div class="description">
<p>Sex shirt in
<br>sparkly black</br> <span class="price">Price $500</span>
</p>
</div>
</div>
<div class="product">
<img src="https://theory.alluringlogic.com/api/v1/productvariation/3/1058.jpg?preset=XS" style="width:300px;height:250px" alt="" />
<div class="description">
<p>Sex shirt in
<br>sparkly black</br> <span class="price sale">Sale Price $500</span>
</p>
</div>
</div>
CSS:
body {
background: #00000;
text-align: center;
}
.orderinfo {
position: relative;
width: 100%;
min-width: 650px;
font-family: "Courier", sans-serif;
font-size: 20px;
}
.date, .purchaseitems {
float: left;
width: 49%;
padding-bottom: 10px;
}
.total-spend-container {
min-width: 650px;
}
.product {
position: relative;
display: inline-block;
width: 300px;
height: 250px;
}
.product img {
background-position: center;
background-size: cover;
}
.description {
position: absolute;
background: rgba(255, 255, 255, 0.75);
font-family: "Courier", sans-serif;
font-style: italic;
top: 50%;
text-align: center;
left: 25%;
width: 50%;
}
.description span {
display: inline-block;
margin-top: 10px;
padding: 3px;
}
.sale {
background: red;
color: white;
}