From the page you posted I understand you want this to be setup on the server side. So you could generate few squares one smaller than the other and then superimpose them. You can give different rotation angles using to The different images, in this case in your final code each div will point to the rotation script.
And you don't need z-index because a sequence is defined so bigger squares are in the bottom of the stack ie are set first so the later ones are drawn at the top. If you want the generator to be fully dynamic then you will need some more complex code, but you can start with fixed coordinates and later start thinking about making them random.
The float property on its own will not do anything, you will need to setup the offsets for each square. Here is a sample runs on the server side with php.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title>test page</title>
<style type="text/css">
body {width: 700px; margin:0 auto; padding: 0}
div {position: relative; margin:0; padding: 0}
.ovr1 div {
position: absolute;
}
</style>
</head>
<body>
<div class="ovr1" style="width:660px;background-color:#DDD;height:600px;">
<?php
$bg_array = array();
for($i=0, $j=10; $i<$j; $i++) {
$bg_array[] = 'rgb(' . implode(',', array(rand(0,255),rand(0,255),rand(0,255))) . ')';
}
$dims = 200;
for($voff=$toff=$i=0, $j=8; $i<$j; $i++) {
$bg_index = rand(0, count($bg_array)-1);
echo '<div style="border: 1px solid #FFF;background:' . $bg_array[$bg_index] . '; width:' . $dims . 'px;height:' . $dims . 'px;margin:' . $voff . 'px 0px 0px ' . $hoff . 'px;"><b>' . $i . '</b></div>';
$voff += rand(0, 100);
$hoff = rand(0, 200);
$dims -= 20;
}
?>
</div>
</body>
</html>
