CSS Positionierung Boxen mit ul li div

JSFIDDLE Beispiel untenCSS Positionierung Boxen mit ul li div

Ich möchte folgende CSS-Layout machen und zur Zeit im, UL mit der LI links zu schweben. Das Problem ist, dass die 2 Rechtecke auf keiner Seite bleiben. Und nicht sicher, wie man die unteren 2 Rechtecke positioniert.

enter image description here Ich versuchte ein div in der Mitte der UL LI gewickelt, aber das ist nicht richtig Markup. Bitte können Sie helfen? Möglicherweise ein JSFIDDLE-Beispiel, wenn Sie könnten? Danke

EDIT: Hier gehen Sie, jsfiddle.net/fpqxy/1 Boxen 2 und 3 sind in Position, aber 4 und 5 müssen unter ihnen sein. Dann muss sich Box 6 mit 7 und 8 weiter unten bewegen. -

Quelle

2012-03-25 SOLDIER-OF-FORTUNE

Ich würde eine '

' mit Colspan und rospan verwenden. Ich weiß, dass Sie "

" nicht als Layoutelement verwenden möchten, aber dies ist genau ein "Tabellenlayout". – nobody

Aus Ihrem Diagramm geht nicht hervor, welche Elemente welche sind. Sind die 2 großen Rechtecke die Divs, die du auf beiden Seiten willst? Und die 4 kleineren sind die lis? ... Würdest du jemals eine andere Anzahl von Lis wollen? Es würde auch Leuten helfen zu antworten, wenn Sie Ihren HTML - vielleicht als Link zu einer http://jsfiddle.net/ Seite posten? – perfectionist

Bare mit mir krank Posten einige HTML .. Ich denke, ich sollte nur DIV Wrapper machen und sie relativ und alles innerhalb als absolut richtig machen? und dann die ganze ul li-Idee wegschmeißen. –