Как сделать блок в css, чтоб от него зависели блоки ниже?

Question

[Андрей Широких]

Доброго времени суток.
Кидаю выдержку из вёрстки:
Выдержка из вёрстки
Есть блоки с вопросами справа и слева, которые раскрываются, и, соответственно, при раскрытии, уводят контент вниз (по задумке).
Левый блок работает без проблем. Правый блок - нет.
Вопрос - как заставить правый блок работать как левый, независимо?
P.S. Если убрать float: right; у этого блока, то он и левый блок станут зависимыми один от другого, при раскрытии панелей вопросов. Так что я не знаю, как быть в этом случае.

Comments

[Вадим]

Переверстайте всё нормально без фиксированных размером, абсолютов, флоатов и на флексах, хотя бы.
Ваша примерная HTML-структура:

section
  title
  columns
    column
      accordion
    column
      accordion
  gallery

columns - display: flex.
columns - width: 50%;

[Ankhena]

На базе вашего безобразия https://jsfiddle.net/pfmkcvsr/

1. В вашей верстке не должно быть !important.
!important нужен лишь для того, чтобы перебить стили, которые прилетают из чужих (не ваших) js.

2. В верстке стараются не использовать фиксированную высоту. Контента может оказаться больше или меньше, чем было в макете. Или пользователь поменяет шрифт в браузере.

3. float придуман для того, чтобы один элемент обтекался другими. Обычно применяются для обтекания картинки текстом. А вовсе не для сеток. Для сеток есть флексы и гриды. Их и используйте.

4. Плюсы это не контентные изображения, их не должно быть в разметке. Их делают фоном и/или псевдоэлементами.

5. Это сочетание class="for_desktop display-none-desktop" меня просто ставит в тупик.

[Eugen]

Ankhena, 5. Это обфускация на скорую руку :)))

[Ankhena]

malente, угу, и без шансов на pretty

[Андрей Широких]

Ankhena, Благодарю. 1. Перебиваю стиль темы в wordpress. 2. С высотой усёк, спасибо. 3. Знал, но много экспериментировал, остался вариант из ссылки. 4. Учту , посмотрю, что можно сделать. 5. Мои заморочки , по моей логике - display-none-desktop это ДЛЯ каких элементов. То есть я сделал десктопный элемент и сделал для него такой класс, чтоб скрыть всё, что не для десктопа )

[Ankhena]

Андрей Широких, 1. Прочитайте про специфичность и делайте такую же, как у селекторов WP. Всё будет хорошо.
5. Если большие различия в контенте для десктопов и мобилок, то делают отдельную мобильную версию.
Если нет, то все решается через media. А название класса выбирается так, чтобы был понятен смысл блока, класса.