Помогите расставить дивы

[cmndr_alexgreen]

Уважаемые мастера, прошу ваших наставлений по размещению блоков:

имеем Моя ссылка

а необходимо следующее: Моя ссылка

подскажите как правильно это организовать.

[cmndr_alexgreen]

первое что приходит на ум, это просто правой колонке выставить верхний-внутренний отступ до уровня левых мелких квадратов, а правые мелкие квадраты флотом выровнять с лева на право. Есть ли какие-то другие варианты, как это реализовать. С учетом того, то такая расстановка будет только на главной странице а далее в правом столбе будет отображаться контент в обычном потоке.

[strange_atom]

cmndr_alexgreen, http://jsfiddle.net/strange_atom/VcVRb/

[cmndr_alexgreen]

Тоже вариант, спасибо.

Вопрос: (#bcube_3, #bcube_4, #bcube_5 {display:inline-block; margin-bottom: 5px;}) Зачем этим блокам выставлять параметр -inline-block, если можно двум первым назначить флоат с лева ?

Edited November 18, 2012 by cmndr_alexgreen

[strange_atom]

если оставить исходный html, то для того, чтобы пятый блок перешел на "вторую строчку"

либо обертывать квадратные блоки попарно, если не хотите использовать inline-block

upd:

если третьему и пятому просто поставить float:left;, то результат будет другой

Edited November 18, 2012 by strange_atom

[cmndr_alexgreen]

Что-то я не то делаю), если делаю как вы написали, то правые квадраты не прижимаются к левому краю, пока не выставишь им флот слева.

А для исключенимя маргина сверху для для блока "acube", я думаю целесообразно просто вставить в подряд два одинаковых блока с высотой 280, все равно над маленькими квадратами скорее всего нужно будет поместить какой нибудь текст.На данный момент имею код:

html

	<div id="page_box">
<div id="column_a">

   <div id="acube_1">
<div id="name"><img src="img/name.png" class="" alt=""></div>
   </div>
   <div id="acube_2">
	   <div id="bcube_1"><img src="img/140-1.png" class="" alt=""></div>
	   <div id="bcube_1"><img src="img/140-2.png" class="" alt=""></div>

   </div>

</div>
<div id="column_b">

   	<div id="acube_3">
	   <div id="bcube_1"><img src="img/140-3.png" class="" alt=""></div>
	   <div id="bcube_1"><img src="img/140-4.png" class="" alt=""></div>
	   <div id="bcube_1"><img src="img/140-2.png" class="" alt=""></div>
	   <div id="bcube_1"><img src="img/140-4.png" class="" alt=""></div>
	   <div id="bcube_1"><img src="" class="" alt=""></div>
	   <div id="bcube_1"><img src="img/140-3.png" class="" alt=""></div>
	   <div id="bcube_1"><img src="img/140-1.png" class="" alt=""></div>
	</div>

</div>

css

#page_box {width:980px;margin:0 auto;padding:0;}
#column_a {width:280px;float:left;}
#column_b {width:700px;float:left;padding-top:280px;background: url(imgct_bg.jpg);}

#acube_1 {width:280px;height:280px;background: url(img/cube_bg2.jpg);}
#acube_2 {width:280px;height:280px;}
#acube_3 {width:700px;height:280px;float:left;}

#bcube_1 {display:inline-block;width:140px;height:140px;float:left;}


#name {padding-top:200px;}

Edited November 18, 2012 by cmndr_alexgreen