А с чего такие жёсткие ограничения. Какая исходная задача? Может некоторые ограничения сейчас не обоснованы...

Cyrax_02,

решение

Для красного блока float:left указывать не нужно, потому что с float отличным от none он не будет обтекать другие элементы (он сам станет плавающим)

Cyrax_02авторДля красного блока float:left указывать не нужно, потому что с float отличным от none он не будет обтекать другие элементы (он сам станет плавающим) Красный должен быть плавающим, чтобы не занимал всю доступную ширину.
В реальной компоновке его размеры определяются текстовым содержимым и фиксированных размеров он не имеет.

Как вариант, можно красный прямоугольник оформить двумя блоками - внешний будет НЕплавающим и будет занимать всю доступную ширину, внутренний - плавающим и ширина будет определяться текстовым содержимым. Но этом вариант сродни той же самой заплатке, когда после плавающего элемента или через [:after] добавляется пустой блок [clear: both] или [clear: left]

Если Вы решаете практическую задачу, то её следует озвучить и решить (потому что иначе будем ещё пол дня вокруг да около топтаться). Если же это академическая задача (то есть необходимо некое идеальное решение при именно таких условиях), то такая задача правильного решения не имеет из-за установленных ограничений :)

Так что решайте, что Вам на самом деле надо сделать, и вводите нужные корректировки в задание :) А то сейчас это звучит как "есть машина с квадратными колёсами. Хочу что бы она ездила, но при этом надо что бы плавно и без костылей". Такого не бывает. Или уберите квадратные колёса, или придётся мириться с костылями

Cyrax_02На простейшем тестовом примере нет принципиальной разницы, где стили прописывать
В реальном проекте, естественно, все стили в отдельных css-файлах, а вернее, в scss-файлах

Вот подкорректированный пример, где размеры прямоугольников жёстко не заданы + несколько красных прямоугольников расположены друг под другом:
https://jsfiddle.net/wupkk897/2/

Задача : расположить красные прямоугольники сразу после простого текста
При этом красные прямоугольники должны быть расположены вертикально и НЕ должны занимать всю ширину свободного пространства. Весь текст в примере - произвольный.

Можно ли решить задачу только стилями и не используя CSS3 ?
И желательно не задавая блочным элементам [display: inline-block] - некорректно работает в IE6-7 (по отношению к блочным)

У меня ощущение, что я попал в 2010-ый, когда ЕЩЁ заморачивались поддержкой IE6

Но вообще Вы так и не описали задачу, а накладываемые ограничения на решение делает его невозможным.

Почему Вы пытаетесь сделать именно так? Чем вызвано требование не менять вёрстку ( у Вас нет доступа или Вы не хотите)? Ну, с display: inline-block уже разобрались, хотя вероятнее всего это требование ничем не обосновано. Не представляю что это должен быть за софт, который работает на движке от IE6 (ведь самого IE6 уже давно нет). Из википедии: "По состоянию на апрель 2014 IE6 используют 0,1% пользователей". Думаю, понимаете, что по состоянию на сентябрь 2017 его если и используют, то не более 0.01%? Мы сейчас поддерживаем версии IE с одиннадцатой, например.

Ровно так же непонятен запрет использования css3, который уже поддерживается всеми браузерами с редкими исключениями, когда приходится использовать префиксы в свойствах. (-moz-, -o-, -webkit- и т.д.).

[Cyrax_02]Что касается НЕдобавления HTML-кода. Это идеологически и архитектурно неправильно[/quote]

Это не так. Если Вы разделили контент на 2 колонки, значит сделали это по какому-то принципу. А значит у Вас на странице присутствует 2 разных группы контента (имеется ввиду именно в обсуждаемом участке страницы). Потому если у Вас есть доступ к html, то могу Вас заверить, что оборачивание контента в дивы не приведёт ни к чему плохому. Тем более что Вам и вовсе достаточно только правые блоки в div обернуть и задача уже будет решена (как я понимаю эти блоки по задумке и должны быть какими-то баннерами или типа того... что-то другое редко выносится в правую колонку страницы)

Вы просто возвели обычное рекомендационное утверждение в статус абсолютного правила, от чего и получили проблему :) Контент по смыслу вполне можно группировать с помощью блоков (и даже скорее не можно, а нужно, для простоты поддержки). И специально для этого в html5 добавили уйму семантических тэгов, позволяющих контент не просто разделить, а и явно указать парсеру, что это за контент и по какому принципу разделён.

Ну а насчёт css3...
css3 поддержка
Внизу на странице Вы можете найти таблицу с версиями браузеров и их поддержкой css3 в процентах. Как видно все браузеры поддерживают уже более 50% свойств... при чём в этом списке есть версии, которыми пользуются 0.4% пользователей (по сути 4 юзера из 1000, что обычно уже очень нецелесообразно поддерживать). Так что стандартная практика это не запрещать использование css3 в проекте, а наоборот поощрять, но только поддерживаемые свойства (что бы без костыле) или же свойства с префиксами (что бы потом можно было их одним движением удалить и оставить чистые стили).

При работе с мобильника (даже айфона или на андроиде) подсовывают совсем другой файл стилей... Но там, скорее всего, нет никаких двух колонок, ведь зачастую размеры экрана не позволяют. А если это совсем старый мобильник, то там вовсе всё чуть бы не до текстовой версии упрощают.

Cyrax_02И как вы гарантированно определите, что запрос получен от совсем старого мобильника (чтобы отдавать " чуть ли не текстовую версию ") ?
По разрешению экрана и по операционке например :)

Cyrax_02Помимо того, что зелёный и синий прямоугольные области семантически друг с другом никак не связаны, имеется принципиальная проблема - в зависимости от горизонтального разрешения зелёный (верхний) прямоугольник размещается слева или справа (float: left) и (float: right), при этом синий прямоугольник (нижний) всегда остаётся справа.
Тут как уже говорил без конкретики ничего не решится :) Изначально поставленная задача решения не имеет, и пока Вы её не измените, она так и будет без решения. Могу лишь предложить озвучить всё исходную задачу (а не попытку её решения), тогда, возможно, кто-то сможет озвучить и другие варианты решения. При этом не надо все 200 страниц ТЗ сюда копировать, разумеется. Достаточно скопировать несколько десятков строчек, которые описывают указанную часть страницы и приложить макет или прототип, по которому выполняется вёрстка.

Без дополнительной информации лично я больше ничем помочь не могу.

Cyrax_02,

авторРазрешение экрана через заголовки запроса не передаётся
Конечно не передаётся. Но в css не просто так ввели @media. Оно то и позволяет показывать разные варианты стилей для разных разрешений и даже для разных типов устройств.

авторДа и "операционку" у старых мобильников определить не всегда можно точно
Вам не нужна сама операционка. Вам нужен используемый клиент (браузер) и разрешение. А у старых телефонов оно до 320 по ширине у всех вроде (если нет, то процент исключений настолько мизерный, что ним снова же можно пренебречь). Под движку браузера узнаём поймёт ли он нашу вёрстку, а по ширине - нужна ли она ему вообще как таковая (320 по ширине это явно не 3 колонки контента).

авторОдин из них - заключить правые блоки в общий <div>. Это "послабление" не реализуемо, т.к. в зависимости от горизонтального разрешения зелёный (верхний) прямоугольник размещается слева или справа, а правый остаётся всегда справа
Так а с чего оно нереализуемо, если в зависимости от разрешения Вы можете применить разные стили?
Ну пускай при разрешении выше N у контейнера будет float: right, а вложенные будут обычными, а при разрешении меньше N контейнер будет обычным блоком, а вложенные в него будут плавающими (один с float: left, а второй с right.

Не вижу проблемы :)

Готовая реализация

Вот даже накидал как это делается. Если уменьшить размер окна до ширины в 800px, то зелёный блок перепрыгнет влево.

Cyrax_02,

Ваше утверждение об нарушении семантики оценить не могу, ведь не знаю что в этих блоках должно быть. (да и вообще Вы излишне заморочились... от одной лишней обёртки ничего не изменится)

А озвученные в последнем сообщении проблемы вообще не понял. Про 2 варианта вёрстки Вы только сейчас упомянули, да и честно скажу, мне кажется что Вы и тут что-то усложнили (могу ошибаться, но чувство очень определённое, ведь очень необычно на 2 разные вёрстки применять одни и те же стили и расстраиваться, что что-то пришлось лишнее и ненужное написать :)) )

Cyrax_02авторА озвученные в последнем сообщении проблемы вообще не понял. Про 2 варианта вёрстки Вы только сейчас упомянули, да и честно скажу, мне кажется что Вы и тут что-то усложнили (могу ошибаться, но чувство очень определённое, ведь очень необычно на 2 разные вёрстки применять одни и те же стили и расстраиваться, что что-то пришлось лишнее и ненужное написать
Вариантов компоновки даже не 2, а больше. И во всех вариантах используется один набор стилей для зелёного (верхнего) прямоугольника. Если добавить обёртку, специально для этого случая часть стилей придётся прописывать для обёртки, часть - для зелёного (верхнего) прямоугольника. Впрочем, это уже детали.

На текущий момент имеется 2 варианта решения (правда, не идеальные, но каждый предполагает некоторое допущение):
1 .Использовать плавающую обёртку для правых прямоугольных областей
2 .Использовать [inline-block] для красного прямоугольника

Определённо следует выбрать первый ;) Потому что при реализации вторым способом Вам и правда придётся лишние элементы в вёрстку добавлять, для размещения красных блоков в столбик. Это или br или какие-то пустые блочные элементы, которые выполнят роль br (оба варианта фиговые, ведь br вперемешку с div - не самая лучшая и понятная реализация, а пустые div выполняющие роль br - вообще семантически неверно)

И ещё одно, если Ваши блоки могут по-разному модифицироваться (как Вы сказали, у Вас может быть множество компоновок этих блоков), то рекомендую Вам посмотреть на методологию БЭМ от яндекса. Она придумана именно для решения подобных задач и я, например, сейчас принял её как стандарт и требую от всех участников процесса следования этой методологии. Всё сразу в разы упростилось.