Расположение div'ов с position: relative по горизонтали

[F_Z_14]

Всем Привет!

На странице есть блок content, внутри которого должны распологаться блоки по горизонтали на всю ширину блока(если не влезают, то переходят на новую строку), которые представляют фотоальбом. Блоки .photo_container имеют position: relative, так как в них находятся блоки с position: absolute и с помощью top, left накладываются друг на друга.

Пробовал обвернуть .photo_container в другой блок .photo_album с обычным позиционированием, но не помогает, блоки .photo_album находятся друг под другом.

Подскажите, может как можно сделать? Желательно средствами css.

HTML:

<div id="content">

<div class="photo_container">

<div class="photo"><img src="pics/my_photo.jpg" alt="фотка моя"/></div>

<div class="photo photo2"><img src="pics/my_photo.jpg" alt="фотка моя"/></div>

<div class="photo photo3"><a href=""><img src="pics/my_photo.jpg" alt="фотка моя"/></a><div class="album_name"><a href="">Название альбома</a></div></div>

</div>

<div class="photo_container">

<div class="photo"><img src="pics/my_photo.jpg" alt="фотка моя"/></div>

<div class="photo photo2"><img src="pics/my_photo.jpg" alt="фотка моя"/></div>

<div class="photo photo3"><a href=""><img src="pics/my_photo.jpg" alt="фотка моя"/></a><div class="album_name"><a href="">Название альбома</a></div></div>

</div>

</div>

CSS:

.photo_container

{

position: relative;

top: 30px;

}

.photo

{

position: absolute;

width: 183px;

height: 148px;

background: url(pics/pframe.png);

-webkit-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.21);

-moz-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.21);

box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.21);

}

.photo img

{

position: absolute;

top: 11px;

left: 12px;

}

.album_name

{

position:absolute;

font: 10pt 'Open Sans';

color: #515151;

top: 122px;

padding: 0 30px;

}

.photo2

{

-moz-transform: rotate(-10deg);

-webkit-transform: rotate(-10deg);

-o-transform: rotate(-10deg);

-ms-transform: rotate(-10deg); /* для IE9 */

transform: rotate(-10deg); /* на будущее */

-webkit-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.21);

-moz-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.21);

box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.21);

top: -20px;

left: 10px;

}

.photo3

{

-moz-transform: rotate(5deg);

-webkit-transform: rotate(5deg);

-o-transform: rotate(5deg);

-ms-transform: rotate(5deg); /* для IE9 */

transform: rotate(5deg); /* на будущее */

-webkit-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.21);

-moz-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.21);

box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.21);

top: -20px;

left: 10px;

}

Пока вот так:

Хотелось бы так:

Edited January 29, 2012 by F_Z_14

[sammasati]

Вот как-то так: http://jsfiddle.net/sammasati/mHrq4/1/