Вот ломаю голову чтото уже не первый час... Сделать хочется что б работало и на старых браузерах - т.е. без flexbox
Правый блок получается, что фиксированный. В дисктоп-версии он равен 210px.
Переход блоков через media-запросы. вероятно на 540px.
Тогда абсолютно спозиционируйте второй блок, чтобы он вылетел из общего потока, а в мобильной версии измените позиционирование на static - блок вернётся в общий поток и будет между 1 и 3
Stilar, Знаю. Я лишь показал общую концепцию, отвечая на ваш вопрос. Как я понял по вашему вопросу, вы сумеете подстроить под себя ширину, высоту, цвета и прочее )
Stilar, https://jsfiddle.net/ouodkeLn/202/ Вот, пожалуйста - фиксированные 210зч. Вы же не дали ссылку на песочницу и не выложили свой код, указав только конкретную ширину одного блока в качестве входных параметров.
boga-net, ценю, что иллюстрируете направление мыслей примерами.
ваше решение очень подходящая для %, но вот как появляется фиксированные блоки - тут верстка ломается.
в вашем примере блок не полностью показывается на экране - часть не видна (за прокруткой)
см -
boga-net, а у меня кода нет =(
я ваш код смотрел, добавил текст, что бы видно было чуть нагляднее, как блок выглядит когда ширина фиксированная. Ну и подвигал размеры - получил что сверху картинку дал. https://jsfiddle.net/Mazian/g7c8xa1o/
Stilar, Я думал у вас есть опыт в вёрстке, просто не получается сделать то, что было озвучено в вашем вопросе. Так-то надобно было убрать фиксированную высоту у второго блока. За неимением контента, надо же как-то его отобразить, а значит - добавить высоту (для примера). Или добавить
min-height: какое-то число
Вы добавили текст во второй блок, но у него высота 150px - значит он не сможет растянуться
boga-net, есть опыт, да.
но тут вот засада - и так пытаюсь и так - всё чтото плохо выходит - гдето чтото отваливается, загораживается или еще что.
я уже считаю, что это нерешаемая задача в принципе. без js. и наверное нужно отказаться от самой этой идеи, удовлетвориться что блок 2 надо ставить в коде первым и получать его верхнем в мобильной верстке...
а то, что не влезает в экран - я имею ввиду по ширине. на первом скриншоте моем у правого блока нет правой части - это не плохо сделан скриншот - это действительно так - остальное уходит за поля браузера.
Уходит за поля, потому что у контейнера фиксированная щирина)
Слушайте, это вообще так себе затея. Есть же флекбоксы,они нормально поддерживаются. Если в каком-то унылом браузере что-то не будет отображаться - чёрт с ним. Поищите хаки, чтобы флекбоксы работали во всяком старье. Задач простая, как и её решение. Но судя по вашему влпросу, я понял, что вв не ищите простых путей)
Stilar, ок. Но нужно знать ширину блока 1 и блока 3. Фиксированная она у них или занимает остальное пространство родительского контейнера, минус 210px блока 2 ?
