How to keep text in upper corner of image

See more:

CSS

HTML

text

I have an unordered list with 3 list items within it. Each list item contains an image and 3 lines of text. I'm trying to keep the word "SOLD" in the top-right corner of an image. This image is within the < li > item, along with other divs, and the code for the < li > item looks like this:

<li>
    <div class="houseImage"> <img src="http://media-cdn.tripadvisor.com/media/photo-o/01/ca/eb/48/clenahoo-house.jpg"/></div>
     
     <p class="sold">SOLD</p>
     <div class="titlebox">Demo Title</div>
     <div class="locationbox">Demo</div>
     <div class="pricebox">DemoDemo</div>
     <div class="boxlink"><a class="divLink" href="http://www.google.com"></a></div>
</li>

You can see I reference the class "sold". It currently works somewhat and can be seen here.[^]

The style code for the sold class is:

.sold{

    position:absolute;
    top: 3%;
    left: 55%;
    color:red;
    font-size: 6vh;
    font-weight:bold;
	text-transform: uppercase;
	overflow: hidden;
}

Right now this is producing inconsistent results across different viewport sizes and browsers (chrome/internet explorer). I'm wondering if there's a way to make this responsive and STAY in the top-right corner of the image no matter the browser or screen size?

I understand media queries might need to be used for being responsive, but for browser differences?? Perhaps there's a cleaner CSS method?

Thank you all!