Layering html elements without using 'position' attribute

In a project I was working on, we wanted to layer a small piece of information on top of an image, but we did not want to use positioning - this was due to bugs in IE7 and IE8 that were making it tough to position other items on top or do any scriptaculous effects - like blinds.

It turns out it's quite easy to do, at least in firefox and safari on a mac and IE7 on a PC.

Here's how:

<div style="border: 5px solid yellow; height: 90px; width: 100px; background-color: yellow; margin:0;">
<div style="height: 90px; width: 90px; background-color: blue; float: right; margin:0"></div>
<div style="height: 20px; width: 50px; background-color: red; margin:0; margin-top: -20px; float: right "></div>
</div>

The yellow is in the background - the blue div is nested. The red div is on the blue div - floated right (this is optional) with a negative margin.

Try it out on your own or view source.