Сложная вёрстка: 4 столбца

[Gold Dragon]

Прикладываю рисунок чтобы было нагляднее.

Суть простая. Макет имеет 4 столбца

- левый и правый динамичные

- второй слева 400px

- второй справа 600px

Соответственно макет может расширяться, но не должен сужаться меньше 100px.
Т.е. крайние могут уменьшиться до 0%, центральные всегда имеют одинаковый размер и должны центрироваться. И каждая из сторон имеет свой цвет

Сам пытался, перепробовал разные Фреймворки - практически беда одна, при уменьшении окна браузера центральные блоки наезжают друг на друга.

 

 

[mrnobody]

http://jsfiddle.net/mrnobody/3xrpax7n/1/

[wwt]

Блоки А и B будут содержать контент?

[Gold Dragon]

нет. Это просто поля для больших мониторов.

 

PS

сейчас начал смотреть в сторону Flex... Мне кажется это может стать выходом из положения

[Vicos]

Если А и В это поля для широких мониторов, то какие же это колонки? Обрамляем и Центрируем "второе" блоки и получаем две колонки для контента, а первые псевдо блоки и будут сужаться до 0 при ширине экрана меньше 1000px. Так?

[Gold Dragon]

тогда как закрасить поля "А" и "B" в цветасоседних панелей? При больших разрешениях там будет фон.

Можно конечно сделать фотоный рисунок, но так как колонки разбиты не по центру, то этот фон будет смещаться и не совпадать

[Vicos]

Градиент на задний фон, переливание сделать резким за "вторыми" блоками, основные блоки залить отдельно каждый аналогичного цвета. Как вариант попробуйте так.

[Gold Dragon]

Суть в том что основные блоки не всегда растянуты по вертикали.

 

вот картинка если экран 1000px

вот картинка если экран шире.. градиент и сами блоки не равномерно центрируются

В принципе такая же проблема при уменьшении.. Да появляется горизонтальная прокрутка, но фон то смещается

[Vicos]

Не пойму тогда что должно быть на заднем фоне под блоками.

Или если догадываюсь, то тогда на js можно вычислять ширину до блока второго правого блока и там делать переливание градиента.

[Gold Dragon]

- Страница должна быть поделена на 40% и 60%

- каждая часть должна быть окрашена в свой цвет

- Текстовое поле слева имеет фиксированную ширину 400px

- Текстовое поле справа имеет фиксированную ширину 600px (конечно желательно сделать это поле резиновым 400-1100px)

- Эти текстовые поля должны быть прижаты друг к другу и отцентрированы

- ну и соответственно, они не должны наезжать друг на друга при изменении размера браузера

 

Вот какая задача. И вёрстка должна быть только HTML+СЗЗ

 

PS

пробовал подобное реализовать через Flexbox, но возникают аналогичные ошибки. Такое ощущение, что эту задачу можно решить только таблицами, да и что-то тоже не уверен

[zlodeev]

Есть код, который ты написал?

Edited September 30, 2015 by zlodeev

[Vlad]

Вот как градиент для фона можно использовать.

http://jsfiddle.net/kweLzxzq/

[Gold Dragon]

Vlad, подход понравился и даже на первый взгляд имеет место жить.. Пошёл попробую подогнать в свой проект. Правда есть некоторые сомнения в поддержке.. http://caniuse.com/#search=linear-gradient

PS

zlodeev, к сожалению кода нет. Я за сегодня с пару десятков раз переписал всё с нуля: сам сочинял сетку, использовал Pure и Bootstrap, вот последнее решил испробовать совершенно новое для себя - Flex. Кстати. очень забавная вещь, но решает огромное количество проблем с вёрсткой исключительно малым кодом.. Остаётся вопрос поддержки браузерами ...

[wwt]

Я верно понял ? http://jsfiddle.net/x4js2z19/

[Gold Dragon]

wwt, интресный вариант, но у меня он работает только в Лисе. Осёл, Опера, Хром, Максон, Сафари - полностью игнорируют отступы, центральные блоки растянуты на полную ширину

[Gold Dragon]

Vlad, впринципе собрал вариант на твоём примере.. Но вот никак не могу левый блок выравнить по правой стороне

http://jsfiddle.net/3xrpax7n/

 

Если воспользоваться теми же Flex, то блоки начинают совмещаться

Edited September 30, 2015 by Gold Dragon

[wwt]

wwt, интресный вариант, но у меня он работает только в Лисе. Осёл, Опера, Хром, Максон, Сафари - полностью игнорируют отступы, центральные блоки растянуты на полную ширину

пардоньте =) нигде кроме FF не проверял =)))

[Gold Dragon]

mrnobody, именно то что нужно! Вроде работает везде.

Тему можно закрывать +++!

Edited September 30, 2015 by Gold Dragon

[Gold Dragon]

Забыл сказать Большое спасибо Vlad`у за саму идею