I want to stick a div left to another div - css

Question

I am working for this website's responsiveness,
I want to stick the ratings image left to with a bit margin, when the width of the window is 335 it is working on left: 50% but when i increase the width of the window, it doesn't remain stick to what i want, Please suggest me, what should i do ??
Here is my code
<div id="filteredRestBody" class="row filteredRestBody">
<div id="row1" class="row">
<div id="yochina" class="col-sm-4 filterThumbnails" style="background: url('images/yochinathumbbck.jpg')">
<img src="images/bestoffers.png">
<div id="discountImg">
<img src="images/discountimg.png" style="">
<div class="discountNum" title="Discount">15%</div>
</div>
<div id="ratings" title="6/10">
<img src="images/ratingy.png">
<img src="images/ratingy.png">
<img src="images/ratingy.png">
<img src="images/ratingy.png">
<img src="images/ratingy.png">
<img src="images/ratingw.png">
<img src="images/ratingw.png">
<img src="images/ratingw.png">
<img src="images/ratingw.png">
<img src="images/ratingw.png">
</div>
<div id="ratingNum">5</div>
<div id="restaurantThumbnailsTitle" class="restaurantThumbnailsTitle">
<span>Yo! China</span>
<br>
<span class="restaurantThumbnailsTitleText">chilled out chinese</span>
</div>
CSS
.filteredRestBody {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: medium none;
border-top-left-radius: 23px;
box-shadow: 0 0 0 grey;
height: auto;
margin-left: -4%;
padding: 0 0 47px 8px;
position: relative;
top: 30px;
width: 111%;
}
.filterThumbnails {
background-position: 2px -19px;
background-repeat: repeat;
border-top-left-radius: 10%;
border-top-right-radius: 10%;
height: 200px;
margin-left: 5.3%;
margin-top: 50px;
position: relative;
top: -36px;
width: auto;
}
#ratings {
background: none repeat scroll 0 0 rgba(0, 0, 0, 1);
border-radius: 8px;
left: 50%;
padding: 0 7px 4px;
position: absolute;
top: 49%;
}
#ratingsNum {
background: none repeat scroll 0 0 rgba(0, 193, 0, 0.9);
border-bottom-right-radius: 9px;
border-top-left-radius: 9px;
font-family: Times New Roman;
font-size: 1.6em;
font-weight: bolder;
left: 89%;
padding: 0 8px;
position: absolute;
top: 45.5%;
width: auto;
}
This is the first screenshot when the width is 335
This is what happens when i increase the window's width

Answer 1

Instead of using left, you can use right property in your CSS. This will stick ratingsNum and ratings divs to the right border of container div.
CSS
#ratings {
right:50px;
}
#ratingsNum {
right:10px;
}
jsFiddle Example
Hope it helps.
As a side note, I've noticed that your snippet contains some elements (i.e. #discountImg div) without the closing tag (in this example </div>). Pay attention because this can lead your layout to unpredictable results.