Аттрибуты border и background налезают на элементы с float, как исправить?

Question

[domingocolombo]

jsfiddle.net/domingo/dnc8rz1L/5

Если абзац с borderом или backgroundом, а справа элемент с float:right. То текст ведет себя нормально - огибает элемент с float, а border и цвет фона занимают в ширину 100% родителя. То же самое относится к blockquote.

Как сделать, чтобы граница или фон "огибали" блок с floatом?

Comments

[Евгений Петров]

Исправить?) Блоки игнорируют float-элементы, и это написано в спецификации. А текст учитывает, да.
Так что ваш вопрос звучит так: «Как извратиться и сделать так, чтобы ...?».

Answer 1

[Алексей Рытиков]

Может быть, вам просто добавить overflow: hidden в .p1 и blockquote?
https://jsfiddle.net/k09m2vLu/

Comments

[domingocolombo]

Спасибо, помогло.

Answer 2

[Андрей Федоров]

codepen.io/aliencash/pen/zGBJZq
типа того, правда мне результат не очень нравится, не совсем то, что вам нужно если я правильно понял задачу...
зачем вам в принципе огибание, можно отдельный сайдбар сделать для изображений...

Answer 3

[Андрей Б.]

Чтобы фон и рамка огибали, так не получится, по крайней мере в вашем контексте. Получится только для одного из блоков с текстом. Пример jsfiddle.net/dnc8rz1L/7
Чтобы сделать для двух, нужно сделать для них обертку и уже обертке указать фон и рамку, но я так понимаю вам нужно их разделять. Поэтому по другому никак.

Answer 4

[domingocolombo]

Спасибо всем за помощь. overflow:hidden помог.
задавать ширину не резон - картинки могут встречаться в течение всего контента, поэтому для каждого блока задавать ширину - не вариант.
То же самое с отдельным сайд баром - под каждую картинку создавать не резон.