I've been banging my head on this one. I want to absolute position an image that I will be moving around in a div and want anything that extends outside the div to be clipped. Here is an example of the problem:
<html>
<body>
<div style="width: 500px; height: 200px; border: 1px solid black; overflow: hidden;">
<div style="width: 200px; height: 50px; margin: auto; border: 1px solid black; background: gray;">On top of image.</div>
<div style="position: absolute; top: 10px; left: 250px; z-index: -1;"><img src="http://www.google.com/logos/worldcupfinale10-hp.gif" /></div>
</div>
</body>
</html>
So, I want the right edge of the logo to not display. Ideas?