title: How to position an icon in a metro-like web GUI? (images included)
body: <p>I have created a simple, light weight, GUI similar to <a href="http://gadgetmix.com/articles/windows-8-review/" rel="noreferrer">Microsoft Metro UI</a>. It is comprised of a set of  elements which are <strong>floating</strong> to make it flexibly re-sizable according to the size of the screen:
  <img src="https://i.stack.imgur.com/g7yyo.jpg" alt="enter image description here"></p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Index2&lt;/title&gt;
  &lt;style type="text/css"&gt;
  .clearfix:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
  }
  html{
      font-family:Verdana, Geneva, sans-serif;
      font-size:14px;
  }
  div.tiles{
      background-color:black;
      padding:50px;
  }
  div.tiles div{
      border-radius:2px;
      padding:10px;
      margin:5px;
      color:white;
      background-color:#666;
      display:marker;
      cursor:pointer;
      float:left;
      width:25px;
      height:25px;
  }
  div.tiles div:hover{
      transition:background-color 1s;
      -moz-transition:background-color 1s;
      -webkit-transition:background-color 1s;
      background-color:#060;
      -moz-transform:rotate(6deg);
  }
  div.tiles div.icon{
      position:relative;
      bottom:0px;
      left:0px;
      z-index:10;
      background-color:red;
  }
  div.tiles div.w1{width:25px;}
  div.tiles div.w2{width:80px;}
  div.tiles div.w3{width:160px;}
  div.tiles div.w4{width:190px;}
  
  div.tiles div.h1{height:25px;}
  div.tiles div.h2{height:80px;}
  div.tiles div.h3{height:160px;}
  div.tiles div.h4{height:190px;}
  &lt;/style&gt;
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="tiles clearfix"&gt;
      &lt;div class="w4 h2"&gt;
      mattberg@live.com &lt;div class="icon"&gt;icon&lt;/div&gt;
      &lt;/div&gt;  
      &lt;div class="w4 h2"&gt;
      RSS
      &lt;/div&gt;  
      &lt;div class="w4 h2"&gt;
      13
      &lt;/div&gt;
      &lt;div class="w2 h2"&gt;
      IE
      &lt;/div&gt;  
      &lt;div class="w2 h2"&gt;
      Photo
      &lt;/div&gt;  
      &lt;div class="w4 h2"&gt;
      Now Playing
      &lt;/div&gt;  
      &lt;div class="w4 h2"&gt;
      Photo &lt;div class="icon"&gt;icon&lt;/div&gt;
      &lt;/div&gt;  
      &lt;div class="w2 h2"&gt;
      Shop
      &lt;/div&gt;
      &lt;div class="w2 h2"&gt;
      SMS
      &lt;/div&gt;  
      &lt;div class="w4 h2"&gt;
      Weather &lt;div class="icon"&gt;icon&lt;/div&gt;
      &lt;/div&gt;  
      &lt;div class="w4 h2"&gt;
      Investment
      &lt;/div&gt;  
      &lt;div class="w1 h1"&gt;
      Lilly
      &lt;/div&gt;  
      &lt;div class="w1 h1"&gt;
      Lilly
      &lt;/div&gt;  
      &lt;div class="w1 h1"&gt;
      Lilly
      &lt;/div&gt;  
      &lt;div class="w1 h1"&gt;
      Lilly
      &lt;/div&gt;  
      &lt;div class="w1 h1"&gt;
      Lilly
      &lt;/div&gt;  
      &lt;div class="w1 h1"&gt;
      Lilly
      &lt;/div&gt;  
      &lt;div class="w1 h1"&gt;
      Lilly
      &lt;/div&gt;  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have a problem positioning the icon elements in the divs. This is what I have:</p>
  
  <p><img src="https://i.stack.imgur.com/XptEv.jpg" alt="enter image description here"></p>
  
  <p>and this is what I want:</p>
  
  <p><img src="https://i.stack.imgur.com/qylJe.jpg" alt="enter image description here"></p>
  
  <p>In other words I want to be able to position the elements in the tiled div elements absolutely. I tried various CSS positioning techniques (relative, fixed, absolute) but couldn't solve it. I suspect it's because the tiles are <strong>floating</strong> elements?</p>
  
  <p>How can I be able to design the contents of each tile regardless of its position in the web page?</p>