Можно ли сверстать такое БЕЗ Flexbox?

Да речь не Бутстрапе... Сразу спрошу: вы ресайзили пример? По ширине и по высоте?

Можно ли сверстать такое БЕЗ Flexbox?

Максим Ленский, речь идет о любом ресайзе. По ширине менять - это одно. А мне нужно, чтобы все не ломалось при изменении высоты... неужели, все забывают ресайзить высоту?:( Не думал об этом, поэтому и не сказал...

Можно ли сверстать такое БЕЗ Flexbox?

Максим Ленский, нет. Скролл должен быть В КОЛОНКАХ. Да, на этом я и обломался. Поресайзите мой пример на jsfiddle, посмотрите на скришоты. Вот это я имею ввиду.

Просто скролл в колонках - плевое дело. А чтобы это все еще было в контейнере с шапкой, который еще и в центре контейнера с шапкой...

Можно ли сверстать такое БЕЗ Flexbox?

Максим Ленский, заранее благодарю. Я вчера над этим весь день просидел - беда: что-то, да не так.
Сегодня утром сел и за минут 5-10 заставил работать это на Flex (дабы не переть сюда с рисунками by Paint).

Можно ли сверстать такое БЕЗ Flexbox?

Максим Ленский, да. Чтобы скролл оставался. Только не через Flex'ы. Пример в описании вопроса (это где выше ответов, ссылка на jsfiddle). Скриншоты в моем комментарии выше:)

Перепробовал все, как уже много раз тут говорил. То не центрируется, то криво ресайзится, то скролла нет... Если делать таблицами, height:100%; от контейнера крашится. Такие вот пироги.

Просто я не думаю, что никто не делал подобное еще до flex'ов. У меня тут комплекс всего, что ранее в css реализовалось крайне специфично и часто хаками, насколько я помню и понимаю.

Можно ли сверстать такое БЕЗ Flexbox?

Илья Ростопка, хорошо, допустим. А теперь мы уменьшаем высоту окна и грустим...

Ваш вариант


Вариант с Flex


Наверное, я чего-то не понял... но как сделать, все же, скролл? Таблицами ничего не выходит, ибо там... ломается высота в 100% от контейнера. Блочные же элементы адекватно не центрируются или при уменьшении окна ломаются.

Можно ли сверстать такое БЕЗ Flexbox?

Илья Ростопка, интересно. Можете скинуть?

Можно ли сверстать такое БЕЗ Flexbox?

Илья Ростопка, забавно. Вы об этом?
.flex { display: block }

Можно ли сверстать такое БЕЗ Flexbox?

Максим Студитских,
1. Сверху шапка (необязательно фиксированная)
2. Далее на оставшуюся высоту контейнер
2.1 Шапка2
2.2 Контейнер2
2.2.1 колонки в контейнере2, на которых должен быть СКРОЛЛ

На пункте 2.2.1 я и запаролся, когда пытался сделать все таблицами.
Поресайзите пример: все плавно и четко. У меня так и не вышло добиться max-height: 250px, при этом грамотное уменьшение при изменении высоты у контейнера2 и/или скролла у колонок.

Пытался всевозможным образом комбинировать блоки и таблицы, но... неудачно.

Можно ли сверстать такое БЕЗ Flexbox?

А причем здесь вообще media-запросы? Вопрос ведь совсем у другом, вы смотрели пример на jsfiddle?
Media-запросы здесь никак не помогут, они никак не помогут правильно сверстать такое без Flexbox.

Верстка сайтов на XML (в топку HTML), кастомные теги и индексация поисковиками, как обстоят дела?

dkukushkin, все хочу блог открыть... и написать, как верстал сайтики в *.svg:) Так или иначе... эксперименты.
Не встречал, как и не встречал доселе XSLT (не застал, видимо), поэтому спросил у более сведущих.
Тогда сейчас сяду реализовать подобное с Pug. Спасибо за советы и удачи.

Верстка сайтов на XML (в топку HTML), кастомные теги и индексация поисковиками, как обстоят дела?

dkukushkin,

Грубо говоря, нечто подобное, но только... верстка нормальной страницы: www.w3schools.com/xml/cd_catalog_with_css.xml

www.w3schools.com/xml/xml_display.asp

P.S. А что вы можете сказать об этой статье? habrahabr.ru/post/124854

Верстка сайтов на XML (в топку HTML), кастомные теги и индексация поисковиками, как обстоят дела?

dkukushkin, изначально я хотел использовать XML (без XSLT) для конечного представления. В основном, чтобы использовать (вроде бы, кроссбраузерно) кастомные теги. Грубо говоря, нечто подобное, но только... верстка нормальной страницы: www.w3schools.com/xml/cd_catalog_with_css.xml
Далее вы озадачили меня немного XSLT.

Можете пояснить немного по каждому "пункту":
1. Оправдано и "хорошо" ли верстать на XML без XSLT (xml для конечного представления)?
2. Плюсы и минусы использования XSLT
3. Кастомный DTD, часто ли и в каких слкчаях используется на практике?

Верстка сайтов на XML (в топку HTML), кастомные теги и индексация поисковиками, как обстоят дела?

Станислав Макаров, ну я - довольно-таки странный, судя по всему, раз верстал, на svg, втыкая только на html формы и видео - интересное занятие. Svg можно спокойно использовать в верстке, иногда это даже выполняет именно свои задачи:)

Спасибо за ответ! Можете немного детальнее объяснить, чем грозит использование XML для конечного представления (без XSLT)? Обязателен ли кастомный DTD?

Верстка сайтов на XML (в топку HTML), кастомные теги и индексация поисковиками, как обстоят дела?

Да тут речь об XML не как о данных, а XML, как представления, замены HTML - верстки, что ли, ибо в XML по-дефолту используются кастомные теги... Я вижу плюс именно в них.

Ну и с XSLT можно это все задействовать куда лучше, насколько я вижу с ваших слов и с того, что прочитал сейчас и до этого, в принципе, хотя нужно получше вникнуть в суть этого. Я сам предпочитаю JSON для данных, но в данном проекте не факт, что буду использовать именно его.
Сверстал почти страницу на HTML, но, когда гляжу на верстку, становится грустно. Я использовал Pug, отказавшись от идеи JSON, AMCSS... Но все равно это выглядит не так, как я бы хотел.

Хотел бы, чтобы вы немного разъяснили мне, стоит ли делать так, как я сказал в первой строчке этого комментария и немного пояснили суть. Заранее благодарю.

P.S. Как я понял, XML+XSLT работает без JS и выглядит, подобно тому же Pug с include, который компилируется в браузере (отсылка к LESS)?

Есть ли плагин для Gulp / Brunch для изменения префикса селекторов во всех *.css файлах?

А я очень надеялся на существование такого плагина для сборщиков:)
Крайне некрасиво выглядит *.styl вида

.{$prefix}-buttons { }
.{$prefix}-button_small { }
.{$prefix}-grid_12 { }

Как лучше задавать классы/селекторы тегам/стилям?

Alexander, если у вопроса есть решение, отметьте это. По самолюбию иногда бьет. Дело не в "Спасибках" и "Плюсиках", а в том, что ты тратишь свое время, чтобы помочь человеку, так или иначе, но ты даже не знаешь, помогло ли ему это, в принципе. Нет - хорошо, да - хорошо. А молчание - знак того, что все твои слова были обращены к стене.

Почему rem'ы работают так при размере шрифта в html в процентах (в Chrome)?

Александр Котов, не за что. Вчера задался вопросом актуальности, сегодня нашел хорошую статью. Полагаю, Вам (да и некоторым из тех, кто читает комментарии), будет интересно.

Вертикальное центрирование inline-block колонок с text-align:justify в сетке (БЕЗ flexbox)?

Дмитрий Тимофеев, пожалуйста, не надо так делать. Дело не в моем уме или его отсутствии, а в Вашем понимании причины. А о причине я твержу чуть ли не в каждом комментарии: СПОРТИВНЫЙ ИНТЕРЕС.
Я не пытался выпендриться, не пытался сказать своим вопросом, что я круче, простите, конечно.
Но Вы своим комментарием (отнюдь не умным) пытаетесь как раз сказать: "Ты глупый! Машины не летают! Либо едешь, либо идешь пешком: самолеты не придумали. Потому что никто ничего не пробовал, и все использовали Fexbox'ы в 2017".
Думаете, я не знаю? Повторюсь, причина - не выпендреж или показуха. Да, костыль. Да, извращение. Но я уже объяснил, почему взялся делать такое откровенное дерьмо. Спортивный интерес, желание проверить, а можно ли, поспорил. Вы называете меня дураком только по причине того, что я потратил немного свободного времени, чтобы применить свои мизерные знания CSS на практике таким вот образом?

И еще раз процитирую причину:

Относительно недавно закончил пилить сетку (из спортивного интереса) на inline-block'ах, которая умеет... почти все, что умеет flexbox (но без flexbox в каком-либо виде)...

Почему rem'ы работают так при размере шрифта в html в процентах (в Chrome)?

Александр Котов, так делали раньше для Retina и экранов с высокой плотностью (dpi и т.п. слова).
Где 10px != 10px, но 62.5% = 10px (именно визуально).
Я - тот еще динозавр, так что, возможно, эта "проблема" уже много лет, как отпала, либо я не совсем верно понимаю ее.