Выход блока за пределы родительского при абсолютном позиционировании?

Question

[Борис Якушев]

День добрый.

Подскажите, пожалуйста, почему появляется вот этот косяк при абсолютном позиционировании блока?

И как исправить данную ситуацию?

Код посмотреть можно тут.

Всем спасибо за советы.

Comments

[Алексей Струков]

Box-sizing: border-box; поставил?

Answer 1

[Serj-One]

Размер не указан, поэтому блок занимает ширину по размеру контента внутри, но не более ширины родителя без учёта паддинга (бутстраповские 15px, на которые он и выступает).
Добавь

.main-news .text {
    left: 15px;
    right: 15px;
}

Answer 2

[tommy_13]

можно у родительского блока добавить overflow:hidden

Answer 3

[Олег]

Добавить для .text
margin-right: 15px;

Comments

[Serj-One]

Не лучший совет. Если контента будет меньше, блок перестанет занимать всю ширину.

Answer 4

[Elwen]

Рекомендую каждый превью стати обернуть родительским классом. Это поможет вам правильно определять границы блоков. Сейчас блок выступает из-за padding`а родительского блока.
В статьях ниже тоже стоит об этом задуматься, т.к. после того, как вы решите вопрос с этим блоком нижние статьи начнут выступать по правому краю на мобильниках.

Answer 5

[Никита Кит]

Всё костыли, не слушай их.
Тебе мешает бутстрап. Он вешает на каждый col-* padding left и padding right по 15px. В принципе ты можешь в css селектнуть нужный тебе col и прописать ему padding 0. Или же просто перестать пользоваться бутстрапом. Второй вариант лучше

Comments

[Алексей Струков]

А какие альтернативы бутстрапу сейчас существуют?
По мне это самый оптимальный инструмент, если необходимо использовать интерактивные элементы, типа табов или аккордеонов. Самому эти вещи очень сложно реализовать по правильному (с учетом требований wcag)

[Serj-One]

Алексей Струков: Сдаётся мне, чувак агрится не конкретно на бутстрап, а на фреймворки в целом. Видимо, приверженец православного самописа.

[Никита Кит]

Алексей Струков: jquery есть. Блин, с ним просто всё делать. Подключать к проекту такой фреймворк, как бутстрап - всё равно что плюнуть на оптимизацию скорости загрузки. normalizer-а хватит. А сетку можно и свою написать. Свои стили надо уметь к ним совмещать. Данный вопрос тому пример.

[Serj-One]

Никита Кит:

jquery есть. Блин, с ним просто всё делать.

Не проще, чем используя проверенные готовые решения.

Подключать к проекту такой фреймворк, как бутстрап - всё равно что плюнуть на оптимизацию скорости загрузки.

Странное заявление. Даже в полном скомпилированном виде фреймфорк увеличит время загрузки не более чем пара небольших изображений. Учитывая общий объём страницы, эта величина настолько незначительна, что учитывать её нет смысла. А если брать фреймворк в исходниках, ничего лишнего не добавится вообще.

А сетку можно и свою написать.

Объективно, сетка бутстрап лучшая, строить велосипеды при наличии отличного готового решения - как минимум глупо.

Свои стили надо уметь к ним совмещать.

Верстаем по БЭМ, фреймворк используем как набор миксинов. Всё отлично совмещается.

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

[Никита Кит]

Serj-One: да, пожалуй ты прав))) просто я приверженец православного самописа)