Позиционирование DIV

[ivanovfcz]

Ребят, я занимаюсь этим довольно не долго, нужна помощь.. Подскажите пожалуйста как разместить div обьекты так что бы внутри одного располагались еще 4 примерно в таких позициях.

[Bizon4ik]

А в чем сложность? Укажите вопрос чуть более подробно. У вас не получается выставить три зеленых контейнера или даже не получается запихать в красный четыре контейнера? И извеснты ли размере зеленых контейнеров?

[ivanovfcz]

Размеры зеленых известны, проблема именно в том как выставить 3 маленьких друг под другом.

#imagewall {display: inline-block; vertical-align: top;line-height: 1px; width:600px;height:600px;background: #FFFFFF  no-repeat ;
			margin: 5px;
			 padding: 2px 2px 2px 2px;
			 border: 1px solid #D6D3D3;
			border-bottom: 2px solid #C4C2C2;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px; }
#imagewall img {display: inline-block;	background: #FFFFFF  no-repeat ;background-size: 100% 100%; 
			margin: 5px; padding: 2px 2px 2px 2px; }
#velimg {display: inline-block;vertical-align: top;  text-align: left; line-height: 0; font-size: 0; }
#smallimg {display: inline-block;vertical-align: top;  width:100px; text-align: left; line-height: 0; font-size: 0; }

<div class= "imagewall">
   <div class= "velimg"></div> 
   <div class= "smallimg"></div>
   <div class= "smallimg"></div>
   <div class= "smallimg"></div>	  
</div>

Edited November 25, 2012 by ivanovfcz

[Bizon4ik]

где-то так http://jsfiddle.net/Bizon4ik/QNtUy/

Так что бы пробелов между блоков небыло нужно посчитать, но мне честно говоря лень )

Edited November 25, 2012 by Bizon4ik

[ivanovfcz]

Можно лучше поменять вопрос, как в таком порядке вывести картинки? я наверно не правильно делаю что картинки в DIV пихаю,этой причиной не получается у меня вывести по твоему примеру

#imagewall { width:600px;height:300px;}
#velimg {  width:450px;height:600px; }
#smallimg {float:right; width:150px;height:100px; }

<div id= "imagewall">
		<div id= "velimg">
		   <img onMouseOver="$(this).fadeTo('fast', 0.9)" onMouseOut="$(this).fadeTo('fast', 1)" onload="$(this).completed = 1; $(this).delay(60).fadeTo('slow', 1)" src="<?php echo (empty($config['Image Size']) ? '' : $set['script name'] . '?image=') . $config['Images Dir'] . $images[0]; ?>"/></a>
		</div>



    	<?php for($i = 1; $i < $number_of_images; $i++) { ?>
		<div id= "smallimg">
		   <img onMouseOver="$(this).fadeTo('fast', 0.9)" onMouseOut="$(this).fadeTo('fast', 1)" onload="$(this).completed = 1; $(this).delay(60 * <?php echo $i + 1; ?>).fadeTo('slow', 1)" src="<?php echo (empty($config['Image Size']) ? '' : $set['script name'] . '?image=') . $config['Images Dir'] . $images[$i]; ?>"/></a>
		</div>
		<?php } ?>
</div>

Edited November 25, 2012 by ivanovfcz