Имеется основной текст и плавающий блок. Всё бы хорошо, но имеются такие условия:

1 . По HTML-коду основной текст должен следовать перед плавающим блоком
2 . Основной текст должен обтекать плавающий блок сбоку и снизу (как если бы плавающий блок был размещён по HTML-коду перед основным текстом)

https://jsfiddle.net/jmuwdvxk/1/

P.S. Если кому интересно, часть первая - здесь .

Ширина плавающего блока фиксированная, высота - произвольная (заранее неизвестна)

Похоже, задача решения не имеет ?

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

И это я так решил

авторОткройте для себя прелести html5 и не страдайте фигнёйОдно другому не мешает. В условиях жёсткой конкуренции бывает целесообразным учёт и таких, казалось бы, малозначимых ньюансов. Что касается html5, то каким образом он здесь сможет помочь ? <figure> и <aside> семантически не соответствуют этому самому плавающему блоку-столбцу. Сам по себе <section> не укажет на второстепенный характер основных данных.

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

Не вариант. Поскольку:
1 . Пустые блоки, которые никогда не заполняются данными, - семантически некорректны
2 . В процессе загрузки и рендеринга основной контент страницы будет скакать туда-сюда (даже если на уровне стилей абсолютно позиционированный блок [left] разместить где-нибудь внизу)
3 . Скрипты на клиенте могут быть отключены либо могут не работать по тем или иным причинам

4 . В адаптивной вёрстке при изменении ширины экрана (например, поворот устройства на 90 градусов) меняется и ширина столбцов. В этом случае придётся скриптами дополнительно отслеживать изменение ширины/ориентации устройства и корректировать высоту блока (ширина корректируется медиа-запросами). А это дополнительная нагрузка на процессор.

автор2. Бред, ниче там не скачет.До начала выполнения скриптов основной текст отображается так, как будто плавающего блока нет. После выполнения скриптов выполняется перекомпоновка основного текста с учётом плавающего блока - слова текста опускаются вниз. Это и есть "скачет"

автор3. Абсолютная херня вообще из пальца высосанная. Вы отключите скрипты и походите по вебу, много насёрфите?Вероятно, тот факт, что если на сайте конкурента при отключенных/неработающих скриптах нифига не насёрфишь, а на твоём сайте насёрфишь, то это только плюс твоему сайту

автор4. Я менял ширину, всё у меня ОкВ вашем примере при изменении ширины окна ширина столбцов не меняется. В адаптивной вёрстке, как правило, меняется. А при изменении ширины столбцов выполняется перекомпоновка их содержимого с изменением высоты блока-контейнера. Это ж очевидно.

авторЗадача выполнена, следующий! Порой, реализация практических задач требует и качества тоже...

авторПро нагрузку про процессор уже выдаёт в вас больное воспалённое воображение. А браузер типа под сложную вёрстку не давит на процессор?Одинаковые по сложности операции на уровне CSS выполняются на порядок быстрее, чем на уровне скриптов

авторЯ не стал заморачиваться, но если вёрстка не резиновая, а адаптивная, как это сейчас модно делать, то решается чисто на стилях, без скриптов, на media queries.В случае адаптивной вёрстки с использованием медиа-запросов задачу чисто на стилях по-прежнему не решить.
Как вы будете реализовывать обтекание блока, расположенного в HTML после основного контента, этим самым контентом ? Никак.

автор> В вашем примере при изменении ширины окна ширина столбцов не меняется. В адаптивной вёрстке, как правило, меняется. А при
> изменении ширины столбцов выполняется перекомпоновка их содержимого с изменением высоты блока-контейнера. Это ж очевидно.
Media queries и вперёд.В данном случае просто медиа-запросов здесь также будет недостаточно, поскольку верхняя позиция абсолютно позиционированного блока в общем случае не равна 0 или какому-либо постоянному значению. Если выше расположен блок, ширина которого меняется в зависимости от горизонтального разрешения экрана, то и верхняя позиция абсолютно позиционированного блока также будет меняться, и как я написал выше, потребуется скриптами отслеживать изменение ширины экрана и его ориентации для его "перепозиционирования".

авторОтключение скриптов, старые браузеры и прочее — это деградация, в которой ваш сайт не обязан обладать полной функциональностью, точнее это вообще невозможно по сути, но текст всё равно будет отображаться и читаться, просто без плавающего блока. Это называется методика прогрессивного улучшения. 1 . Посмотрите на свой собственный пример . При отключенных или неработающих скриптах основной текст закрывается зелёным блоком. И это вы называете " текст всё равно будет отображаться и читаться " ?

2 . Содержимое зелёного блока относится к основному контенту (в т.ч. поэтому и не заключается в <aside>), хотя и имеет второстепенный характер. Соответственно, при отключенных или неработающих скриптах этот блок должен отображаться. Посему, " просто без плавающего блока " здесь не прокатит.

3 . Учитывая, что поисковые машины анализируют не только HTML-код, но также и стили, то в плане SEO при прочих равных условиях преимущества будет иметь тот сайт, на котором информация представлена в более полном и более удобном для пользователя виде (при отключенных скриптах). При этом скрипты выполняют не все поисковые машины и не во всех случаях. Это один из практических доводов не в пользу ваших убеждений.

авторКачество говорите? Есть огромное количество задач, которые тупо не решаются на стилях. Что теперь, застрелиться? До того, как появились закругления, в вёрстке очень много было говна, чтобы эти закругления эмулировать, и многие так делали. Хотите сказать, они делали некачественно?Если придерживаться хорошего тона программирования вёрстки, то при отключенных или неработающих скриптах контент должен быть представлен в приемлемом виде. Как в плане полноты контента, так и в плане удобства и корректности компоновки. Отсутствие скруглений - это приемлемый вариант. Но отсутствие или перекрытие части основного контента - это, очевидно, не приемлемый вариант.

авторавторЯ не стал заморачиваться, но если вёрстка не резиновая, а адаптивная, как это сейчас модно делать, то решается чисто на стилях, без скриптов, на media queries. > В случае адаптивной вёрстки с использованием медиа-запросов задачу чисто на стилях по-прежнему не решить.
> Как вы будете реализовывать обтекание блока, расположенного в HTML после основного контента, этим самым контентом ? Никак.

Решить. Тоже самое, что я делал в скриптах, только размеры плавающего блока вы задаёте изначально.

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

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

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

авторСерьёзно??? Анализируют стили??
Анализируют. Простейший пример: пишете текст с ключевыми фразами в начале страницы и стилями делаете им [display: none] либо скрываете их иным образом. Поисковые машины этот финт обязательно просекут. В лучшем случае (для вашего сайта) этот текст в поисковой выдаче будет отсутствовать, в худшем - рейтинг вашего сайта будет понижен.

авторНу так за каким нахрен хреном вы тогда пытаетесь обмануть поисковики? Почему сразу блок не разместить наверху? Если поисковая машина по стилям поймёт, что блок идёт самым первым в потоке визуального размещения, тогда ваши старания это борьба с ветряными мельницами.
Здесь следует разъяснить вот что. Размещение плавающего блока после основного контента - это не попытка обмана поисковых систем. Изначально подразумевается, что последовательность отображения контента на экране в целом совпадает с его последовательностью в HTML-коде. Поисковые машины, которые не анализируют стили и не выполняют скриптов, предполагают именно такое соответствие. Поэтому, размещение части основного контента, имеющего второстепенный характер и отображаемого на экране сбоку от основной части контента, после этого самого основного контента - это всего лишь приведение в соответствие порядка размещения данных в HTML с порядком отображения этих данных в окне браузера. К примеру, в табличной вёрстке, а также в блочной вёрстке в случае отсутствия необходимости реализации обтекания, это соответствие легко реализуется чисто на стилях.

Соответственно, блок не размещается наверху, поскольку имеет второстепенный характер и семантически должен следовать после основных данных. Что касается "ветряных мельниц", то плавающий блок с второстепенными данными, отображаемый в окне браузера сбоку от основных данных, не противоречит структуре HTML-кода, в котором он расположен после основного контента. Более того, информация, размещаемая в боковых колонках, у поисковых машин всегда ассоциируется с второстепенным характером данных и размещение её после основных данных на уровне HTML-кода только подтвердит корректность интерпретации поисковой машиной семантики тех или иных блоков данных на странице.

авторВы сами же себе в жёсткой и грубой форме противоречите.
Просто мне уже лень, учитывая, что я уже не понимаю чего вы хотите и по сути спорите сами с собой.Имхо, мои доводы вполне себе логичны и конструктивны. Не утверждаю, что в моих рассуждениях не может быть ошибок и неточностей, но я всегда открыт к конструктивному диалогу, если таковые имеются.