Before CSS gurus jump down my throat, I do know how have blocks arranged in CSS the way I want. What I'm specifically looking for is a way to have blocks resize when resizing browser windows (More importantly on tablets changing from landscape to portrait) 

<http://jsfiddle.net/UUN3x/2/>

```
 <div style="width: 700px; height: 220px;">
   <div style="display: inline-block; background-color: red; height: 210px; width:210px;">   </div>
<div style="display: inline-block; position: absolute; margin-left: 10px; background-color: blue; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 120px; background-color: green; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 230px; background-color: black; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 340px; background-color: yellow; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 10px; margin-top: 110px; background-color: brown; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 120px; margin-top: 110px; background-color: aqua; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 230px; margin-top: 110px; background-color: orange; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 340px; margin-top: 110px; background-color: silver; height: 100px; width:100px;"></div>
</div>
<hr/>
<div style="width: 700px; height: 220px;">
<div style="display: inline-block; position: absolute; background-color:red; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 110px; background-color: blue; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 220px; background-color: green; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 330px; background-color: brown; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 440px; background-color: aqua; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 550px; background-color: orange; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-top: 110px; background-color:red; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 110px; margin-top: 110px; background-color: blue; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 220px; margin-top: 110px; background-color: green; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 330px; margin-top: 110px; background-color: brown; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 440px; margin-top: 110px; background-color: aqua; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 550px; margin-top: 110px; background-color: orange; height: 100px; width:100px;"></div>
</div>  

```

So when I re-size the browser, blocks should move nicely and remain within browser window. 

I'm using absolute here for positioning which I'm sure is the cause for this. But using relative and fixed, I wasn't able to get divs to align nicely in the first place :|

Any help/suggestion/direction is appreciated :)