Меню метро HTML/CSS/jQuery ⇐ Html

[Anonymous]

В настоящее время я работаю над веб-сайтом просто для развлечения, а еще больше — просто для изучения основ.
Поэтому я хочу создать меню Metro (действительно вдохновленное Win 8 X3), чтобы я мог перемещать элементы div с помощью jQuery. Теперь я хочу расположить их правильно:

Код: Выделить всё

[  big block  ]
[small] [small]
[  big block  ]

и т. д.
У меня первые две строки получились просто идеально.
Теперь проблема в следующем:
Мой второй большой блок будет размещен следующим образом:

Код: Выделить всё

[  big block  ]
[small] [small] [  big block  ]

или сразу за другими элементами div:/
Вот код, чтобы было более понятно, что я имею в виду XD:
[CSS]

Код: Выделить всё

    
#facebook{
margin-left:10px;
margin-top:10px;
width:462px;
height:174px;
border:none;
background-color:transparent;
background:none;
background-image:url(buttons/facebook.png);
background-repeat:no-repeat;
background-size:cover;
}

#agenda{
float:left;
margin-left:18px;
margin-top:10px;
width:223px;
height:146px;
border:none;
background-color:transparent;
background:none;
background-image:url(buttons/Agenda.png);
background-repeat:no-repeat;
background-size:cover;
}

#contacts{
float: none;
width: 462px;
height: 174px;
border: none;
background-color: transparent;
background: none;
background-image: url(buttons/Contacts.png);
background-repeat: no-repeat;
background-size: cover;
margin: 10px;
position: relative;
}

и HTML выглядит примерно так:

Код: Выделить всё

Так что, если кто-нибудь знает хорошее руководство о том, как правильно разместить элементы div, или просто какое-то объяснение, как это сделать, это было бы потрясающе! ^_^

Подробнее здесь: https://stackoverflow.com/questions/196 ... css-jquery