Thank you Murray, the content is fed from an XML file but I'm not including it
since the problem can be seen without it. With the XML content it just becomes
4 blocks like the one currently in the code.
<!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"
xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/xpath.
js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.
js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var QqQqQq = new Spry.Data.XMLDataSet("plants_data.xml", "plants/plant");
//-->
</script>
<style type="text/css">
<!--
.blocks {
float: left;
width: 22em;
margin-bottom: 2em;
background-color: #CCCCCC;
padding-left: 0.5em;
margin-top: 1em;
text-align: left;
margin-right: 2em;
height: 25em;
padding-right: 0.5em;
position: relative;
}
#wrapper .blocks #pictures {
text-align: center;
bottom: 5%;
position: absolute;
width: 339px;
left: 4%;
background-color: #FF0000;
height: 245px;
}
body {
margin-top: 0px;
}
#wrapper {
width: 54em;
margin-right: auto;
margin-left: auto;
}
-->
</style>
</head>
<body>
<div id="wrapper" spry:region="QqQqQq">
<div spry:repeat="QqQqQq">
<div class="blocks">
<div>{name}</div>
<div>{description}</div>
<div>{size}</div>
<div id="pictures"><img src="images/large/{image}" /></div>
</div>
</div>
</div>
</body>
</html>