Как правильно задать ширину блока в CSS?

День добрый, коллеги!

Недавно решил освоить верстку div'ами. Вот задался таким вопросом и что-то пока никак. Код примерно такой:

<h1>заголовок</h1>

<div><img>подпись подпись подпись</div>

<p>статья статья статья статья статья статья</p>

<p>статья статья статья статья статья статья</p>

DIV установлено float:right и он по логике является врезкой в текст статьи. IMG внутри блока имеет clear:both. В блоке - картинка + под ней подпись к картинке. Всё работает, кроме того, что DIV занимает места больше, чем хотелось бы - он старается написать "подпись подпись подпись" в одну строку, а мне хочется, чтобы он (DIV) автоматически "сжимался" до размера картинки, которая в нем находится, и текст соответственно писался в скольконужно строчек.

Формулируя четко вопрос: как сделать так, чтобы DIV имел ширину, минимально-необходимую для отображения его контета?

P.S. Таблицами это легко делается так

<tr>

 <td width="100%">статья статья статья</td>

 <td><img><br>подпись подпись подпись</td>

</tr>

Если не ошибаюсь, проблему можно решить аналогичным образом, только вместо

<td width="100%">

нужно написать так:

<div style="width: 100%">

вроде должно помочь

Спасибо за ответ, но ошибаетесь, увы.

Надозадать размеры блоку ! <div style="width: 100px; "> (вместо 100 можно любое значение ставить )

А так:

<h1>заголовок</h1>

<div float=right><img>подпись подпись подпись</div>

<div float=left width=100%><p>статья статья статья статья статья статья</p>

<p>статья статья статья статья статья статья</p></div>

<div clear=both></div>

?

Цитата ("FaustMix"):

Надозадать размеры блоку ! <div style="width: 100px; "> (вместо 100 можно любое значение ставить )

убивать бы за такое
правильно: надо присвоить стиль/класс и задать ему размеры.

Если отвечать только на четко сформулированный вопрос, то вместо DIV использовать SPAN, это по умолчанию инлайн элемент и он будет занимать ширину по размерам внутреннего контента.
Но судя по задачи, если в елементе есть флоат, то елемент становиться блочным...
Можно на DIV установить свойство display: inline-block; - должно помочь...

FaustMix,
Решение очевидное, но это противоречит идеологии CSS

AlekartRu,
Товарищ, а сначала протестировать?

ArtPro,
Это да, но вопрос - КАКИЕ размеры, если ширина картинки в общем случае все время разная

Цитата ("TigerDesign"):

Это да, но вопрос - КАКИЕ размеры, если ширина картинки в общем случае все время разная

а какой размер надо?
Если у Вас размер картинки везде разный, то это это проблемы дизайнера (его непрофессионализм)
Если мы говорим про сайт в котором наполнением занимается "абы кто", то надо делать сетку и все картинки/тексты приводить в соответствие с сеткой.
Т.е. мы имеем дело с ошибками проектирования и попыткой придумать "костыль".

Цитата ("ArtPro"):

Т.е. мы имеем дело с ошибками проектирования и попыткой придумать "костыль".

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

Вобщем, судя по всему, к сожалению, пока что самым "подходящим" решением будет брать из базы картинку, брать её размер и исходя из этого уже прописывать ширину каждого отдельного блока в style="". Как ни прискорбно

Цитата ("TigerDesign"):

но вот "контент" статьи - тут может быть что угодно (в разумных пределах, конечно).

вот как раз и пропишите разумные пределы.
возьмите любой проф дизайн - в контенте будут 1-2 типоразмера картинок для вставки.

Цитата ("TigerDesign"):

Да и разные размеры картинок по горизонтали внутри статьи придадут статье "живость" и читать её будет чуть-чуть увлекательнее.

Женская грудь делают сайт более привлекательным для мужской аудитории... и статью читать интереснее.
"живость" - это как раз термин из области "поиграйте со шрифтами".

А не прискорбно предполагать, что div с какого-то перепуга должен придумать себе, что он должен ограничиваться шириной картинки, а не, например, текста?
Или у картинки есть приоритет для div'а?

penguin,

Я не совсем понимаю, при чем тут "прискорбно", честно говоря.

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

Ваш сарказм неуместен.

Цитата ("TigerDesign"):

DIV должен "придумать себе" сжаться насколько возможно

Он НИЧЕГО не должен придумывать.
Если бы все элементы сами придумывали как им лучше располагаться, то число самоубийств среди верстальщиков было бы чуть боле чем 100%

TigerDesign, Вы или задавайте ширину, как уже мыло сказано выше или просто float делайте:

<img style="float: left;" src="/path/"> Lorem ipsum dolor sit amet, altera sapientem ne usu, te audire aeterno eum, ea phaedrum tacimates tractatos quo.

Если оба варианта Вас не устраивают - бомбите таблицами.

Для дива: overflow:hidden;

Попробуйте max-width (не забудьте про Ослика) + ручная расстановка переносов в подписи к картинке