DIV элемент за пределами документа?

Question

[Владимир Полищук]

Доброго времени суток.
Уже битый час бьюсь головой об стену, помогите пожалуйста.

Задача:
Есть 5 inline дивов с text-align: center;
Пример

<div class="content">
    <div class="first"><img src="content/images/storys/1.jpg" alt="story-1"/></div>
    <div><img src="content/images/storys/2.jpg" alt="story-2"/></div>
    <div><img src="content/images/storys/3.jpg" alt="story-3"/></div>
    <div><img src="content/images/storys/4.jpg" alt="story-4"/></div>
    <div class="last"><img src="content/images/storys/5.jpg" alt="story-5"/></div>
</div>

Соответственно css:

.content {
    margin-top: 25px;
    text-align: center;
}

.content div {
    display: inline-block;
}
.content img{
    display: inline-block;
    padding: 0;
    margin: -2px;
    border: 0;
}

.content .first {
    margin-left: -320px;
}

.content .last{
    margin-right: -320px;
}

Нужно сделать так, чтобы вся эта "карусель" позиционировалась по центру,
И главное, что бы при уменьшении размеров экрана, крайние два элемента (see: first, last) могли вылазить за края экрана, но при этом что бы не появлялся горизонтальный scroll страницы.

Answer 1

[chigoe]

.content {
   ...
   overflow: hidden;
}

Попробуйте

Comments

[Владимир Полищук]

Спасибо)) Сработало)

[Владимир Полищук]

@korobochkin

.content {
text-align: center;
}