Задача на смекалку

[lavr-ik]

<div><img src="img.jpg" width="100" /><p>Какое-то количество текста, причем количество текста разное во всех блоках</p></div>

<div><img src="img.jpg" width="150" /><p>В этом блоке может быть меньше текста</p></div>

<div><img src="img.jpg" width="50" /><p>А в этом наоборот - может быть очень много, вплоть до нескольких предложений и словосочетаний.</p></div>

Блоки обтекают друг друга слева ( float: left; ).

Текст, находящийся в блоке, разумеется, идет в одну строку.

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

Условие: не использовать javascript, чистый CSS (на js решение элементарно). Также не использовать серверное решение жетского присваивания <div style="width: 100px">

Я сейчас копаю в сторону width: inherit.

Edited August 26, 2009 by lavr-ik

[lavr-ik]

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

Спасибо всем, особенно JustNewOne - про возможное, хотя и с костылями и не кроссбраузерное, решение с абсолютным позиционированием я даже как-то и не задумывался