Как сделать отступ автоматически?

Question

[Minningt]

Привет всем. Подскажите, как можно сделать отступ.
codepen.io/anon/pen/jPJwVV
В примере можно увидеть, что на 1-м слайде все нормально(тестовый вариант, делал быстро), но, если заголовок имеет больше длину, то он налезает на описание. Как сделать, чтобы блок с описанием всегда имел отступ от блока с заголовком, к примеру, 15px.
Кнопка "Далее" всегда должна быть внизу как и сейчас.

Answer 1

[Дмитрий Маринин]

Элементы с абсолютным позиционированием не зависят от общего потока, поэтому добавлять автоматический отступ относительно другого элемента, средствами CSS, не получится.

Уберите position: absolute; у параграфов (даты, заголовка, описания). Оберните их в <div class="wrap">...</div> и позиционируйте этот «div» так, как вам нужно.


Дополнительно (на будущее):

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

<a href="#"> <!-- строчный элемент -->
    <p>Some paragraph</p> <!-- блочный элемент -->
</a>

Элементу «a», в данном случае, необходимо задать display: block; или display: inline-block; в CSS.

И еще, пожалуйста, научитесь форматировать код. Во первых, это позволит вам самим лучше воспринимать его, а во вторых, другие разработчики более охотно смогут вам помочь. В такой каше, как у вас, мало кому захочется разбираться (не важно, демо/тест или реальный проект).

Comments

[Minningt]

"Уберите position: absolute; у параграфов (даты, заголовка, описания). Оберните их в ... и позиционируйте этот «div» так, как вам нужно."
К сожалению, если я их оберну в div, то при перелистывании слайдера этот див будет отображен для следующей картинки. По этому я сделал . А иначе никак не исправить?