<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
  "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Negative-margin float test</title>
<style type="text/css">
div {width: 200px; height: 60px; padding: 10px; border: 10px solid gray;}
img {height: 50px; width: 50px; margin-top: -15px;}
img.test1 {float: left; margin-left: -50px;}
img.test2 {float: right; margin-right: -50px;}
</style>
</head>
<body id="www-meyerweb-com" class="css">

<div style="margin: 1em 0;">
<img src="i/tester.jpg" class="test1">
</div>
<div style="margin: 1em 50px;">
<img src="i/tester.jpg" class="test1">
</div>
<div style="margin: 1em 0;">
<img src="i/tester.jpg" class="test2">
</div>
<div style="margin: 1em 50px;">
<img src="i/tester.jpg" class="test2">
</div>

</body>
</html>