JSFIDDLE EXAMPLE BELOW
I want to make the following CSS layout and currently im using UL to float the LI left. The problem is the 2 rectangles wont stay on either side. And not sure how to position the bottom 2 rectangles.

I tried wrapped a div in the middle of the UL LI but thats not proper markup.
Please can you help? Possibly a JSFIDDLE example if you could?
Thanks
EDIT: Here you go, jsfiddle.net/fpqxy/1 boxes 2 and 3 are in position but 4 and 5 need to be below them. Then box 6 needs to move accross with 7 and 8 remaining at the bottom. –
see the below fiddle and demo
Fiddle: http://jsfiddle.net/fpqxy/5
Demo: http://jsfiddle.net/fpqxy/5/embedded/result/