Если абзац с borderом или backgroundом, а справа элемент с float:right. То текст ведет себя нормально - огибает элемент с float, а border и цвет фона занимают в ширину 100% родителя. То же самое относится к blockquote.
Как сделать, чтобы граница или фон "огибали" блок с floatом?
Исправить?) Блоки игнорируют float-элементы, и это написано в спецификации. А текст учитывает, да.
Так что ваш вопрос звучит так: «Как извратиться и сделать так, чтобы ...?».
codepen.io/aliencash/pen/zGBJZq
типа того, правда мне результат не очень нравится, не совсем то, что вам нужно если я правильно понял задачу...
зачем вам в принципе огибание, можно отдельный сайдбар сделать для изображений...
Чтобы фон и рамка огибали, так не получится, по крайней мере в вашем контексте. Получится только для одного из блоков с текстом. Пример jsfiddle.net/dnc8rz1L/7
Чтобы сделать для двух, нужно сделать для них обертку и уже обертке указать фон и рамку, но я так понимаю вам нужно их разделять. Поэтому по другому никак.
Спасибо всем за помощь. overflow:hidden помог.
задавать ширину не резон - картинки могут встречаться в течение всего контента, поэтому для каждого блока задавать ширину - не вариант.
То же самое с отдельным сайд баром - под каждую картинку создавать не резон.
Простой
