CODEWITHSUNDEEP
css
user1227914
user1227914

Reputation: 3514

floating text over image ..how to align it to the right

I am trying to float some text (prices) over images. The images are always the same width and height, but the text may be different length. So I'm trying to keep always the same space on the right side and expand the text towards the left as needed. For some reason, I can't make it work. It always expands floating out of the box to the right. Any ideas?

Here is my HTML code:

<div class="productphoto">
<img src="photo.jpg">
<div class="pricetag">$1959.99</div>
</div>

And the CSS:

.productphoto { 
   position: relative; 
   width: 100%; /* for IE 6 */
}
.pricetag { 
   position: absolute;
   top: 190px; 
   left: 190px; 
   text-align:right;
}

Upvotes: 2

Views: 4716

Answers (2)

Nick Bolsh
Nick Bolsh

Reputation: 150

HTML: Text CSS:

.image {
    float: left;
}
.text {
    float: left;
    margin-left: 10px;
}

Example - http://jsfiddle.net/Hxcgs/

Upvotes: 0

Zoltan Toth
Zoltan Toth

Reputation: 47667

You need to position your .pricetag relative to right, not left:

.pricetag { 
   position: absolute;
   top: 190px; 
   right: 10px; /* NOT left: 190px; */ 
   text-align:right;
}

DEMO

Upvotes: 2

Related Questions