Laying out divs
===

Basic structure as of now: http://jsfiddle.net/sv_in/wbhr8/

The final structure that I want is like below (doctored image):

![layout I want][1]

 - I **have** to support IE7+ so if it can be achieved at least with polyfills also, I am happy.
 - I am not interested in solutions positioning them in **absolute position**
 - I am not interested in solutions using major **DOM manipulation** as the order of the 'li's is important for my need.

Couldn't solve the riddle myself so are there any experts out there???

PS: Even if this is impossible, do give your reasons for me to learn.


  [1]: http://i.stack.imgur.com/PuxIk.png