**See My Fiddle:**
<http://jsfiddle.net/5BEsZ/>

I've discovered something very strange that I haven't seen documented anywhere else... Was wondering if you all had a solution.

You'll notice the negative margin hits a limit at around -212% for image elements. Is there a reason for this? Can you think of a work around?

**Why I Need This (what I've tried):**

I'm making a fluid layout and I want to display a rating system. I have a sprite sheet of stars (similar to the one in the fiddle) that I want to reuse at various sizes. 

Because the size changes I can't use a background image. So I decided to use an image inside a container with a variable width and `overflow:hidden`. The sprite sheet adjusts to the width of the container and the container's viewable content is determined by a `padding-top:20%`. This is so it can be fluid with its width (since every star is a box, the total height is 20% the width).

Then I try and position the star image inside the container with margin-top. I tried using `position:relative` and a `top:-X%`, but because the container technically has no height this was causing issue on mobile phones (-100% of 0 is 0, etc).

So I assumed negative margin would work, but then discovered this strange issue!

***NOTE**: Because it affects only the last row I can make it work in my situation by using a padding-bottom instead of top (thereby bumping every star row up 1), but this isn't an adequate solution for me because it just ignores the problem. What if I wanted quarter stars?*