Два адаптивных блока, один уезжает под другой, как решить проблему?

Question

[Антон Вебсайтовский]

Здравствуйте.
Центральная часть сайта, левый столб, правый столб где блоки идут.
При сжатии окна браузера, правые блоки сжимаются, они адаптивные, но при сжатии экрана браузера, их переносит под левый блок, и там сжимает, как мне сделать чтобы не переносило, сжимало до width: 320px; а уже потом переносило под левый блок.

Рабочий пример:
https://codepen.io/anon/pen/XevBRV

Answer 1

[spike__x]

.rr{
  max-width: 790px;
  width: 100%;
}

Убрал display: inline-block;
закомментировал не нужные

Comments

[Антон Вебсайтовский]

я так пробовал ! не то вообще, блок на блок заходит.

[spike__x]

Антон Вебсайтовский, Обновил песочницу

[Антон Вебсайтовский]

spike__x, а что это значит?

[spike__x]

Антон Вебсайтовский, codepen обновил

[Антон Вебсайтовский]

а теперь понял почему у меня заходит.

из за

.ll{
width: 270px;
height: 10px;
display: inline-block;
float: left;
/*padding: 40px 40px 0 0;*/
background: #000;
}

height: 10px; у меня нет его, там просто блоки идут разные, если 10px поставить то видно что правый блок заходит на левый, у меня так выходит.

[Игорь Забродин]

float есть, clearfix'а нет.

[Антон Вебсайтовский]

Игорь Забродин, а куда его вставить? это clear: both

[spike__x]

Антон Вебсайтовский, тому классу который хотите чтобы запретило обтекание

[Антон Вебсайтовский]

clearfix такой команды нет для css, есть clear: both и т.д, да я так и понял для левого блока.

[Антон Вебсайтовский]

а вот что я нашел:

.clearfix:after {
content: "";
display: table;
clear: both;
}

[Игорь Забродин]

Не просто clear: both, а вся конструкция:

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

Но есть более простое решение с единственной причиной не использовать его - это необходимость поддержки Android 4.4 и ниже

[Антон Вебсайтовский]

.clearfix::after {
content: "";
display: table;
clear: both;
}
то есть это плохо? я все которые были у меня div style="clear:both" /div
заменил на

.clearfix::after {
content: "";
display: table;
clear: both;
}

все вроде ок, а вот с блоками так ничего не ок.

посмотрел ваше решение, там два в одном я так понял, два варианта !
1 - чет не то, а второе то что надо, но там через флекс.

[spike__x]

Антон Вебсайтовский, Делайте через флекс, float это прошлое

[Игорь Забродин]

Первый для сравнения, сейчас оставил только последний вариант. Да, через флекс. Это наиболее простое решение. В Htmlacademy, например, с начала этого года учат делать только на них. Решение есть и для флоатных блоков, но решение на флексах всегда проще. Поддержка давно позволяет их использовать. Но если беспокоится за поддержку (Android + IE), то еще есть at-правило supports . Оно позволяет запихать в него все что может не поддерживаться (при условии что для начало будет реализовано на поддерживаемых свойствах). Ведь если не поддерживается supports, значит и флексы не будут работать.

@supports (display: flex) {
  .wrapper {
    display: flex;
    flex-wrap: wrap;
  }
}

[Антон Вебсайтовский]

так работает:
сделал так.

.rr{
max-width: 790px;
width: 100%;
margin: 40px 0 0 0;
display: table-cell;
}

про флексы знаю, есть много решений на них ! их не очень хочу использовать, так как не у всех еще браузера новые так сказать.

[Игорь Забродин]

Я так сейчас про гриды думаю. Хотя с и их можно использовать. Из ТЗ крупного заказчика:
Браузерная поддержка:
IE >= 11
Android >= 4
IOS >= 8
safari >= 8
Chrome >= 40
Firefox >= 28

Флексы нельзя было использовать только из-за Android'а.