Как заставить текст не обтекать картинку при помощи CSS

Такое, увы, бывает очень часто - на подробное изучения какого-то предмета времени нет, а вот конкретную проблему решить надо...

К примеру, пришлось по работе скопи-пастить визуальный вид одной промо-странички. И понадобилось отключить обтекание текста для некоторых картинок. С таблицами возиться неохота - там было много картинок, пришлось искать решение через CSS.

И чтобы Вам не пришлось проделывать то же самое (искать, имеется в виду) - вот готовое решение.

Итак,

как с помощью CSS отключить обтекание картинок текстом

Если мы просто возьмем, да и пропишем у тега с картинкой атрибут align="left" (выравнивание по левому краю), то нас ждет разочарование (как на верхнем примере на картинке). Текст, дойдя до края картинки, начнет ее обтекать (или "обволакивать", если по другому выразиться).

Но если для картинки прописать стиль style="float: left" (т.е., тег картинки будет выглядеть как <img src="наша-картинка.jpg" width="137" height="200" style="float: left">); а затем для текста, который рядом с картинкой (для параграфа) укажем стиль style="overflow:hidden;" (<p style="overflow:hidden;">) - то текст картинку обтекать не будет. 

Вот как все выглядит на практике:

P.S. После того, как Вы отключите обтекание, то увидите, что текст прижимается прямо к картинке. Что, конечно же, не есть хорошо. Поправить это довольно просто - надо для текста (для параграфа) дописать стиль padding-left:10px; - ну, или сколько вы там пикселей (или пунктов, или процентов) хотите. Да и все дела.