Как создать блок div, соответствующий ширине содержимого? ⇐ CSS

[Anonymous]

У меня есть элемент div, который содержит содержимое фиксированной ширины (изображение внутри другого элемента div) и содержимое переменной ширины (текст, который изменяется динамически). Мне нужно, чтобы этот внешний элемент div:

• начинался с новой строки
• был ровно такой же ширины, как и его содержимое
• li>
  желательно заканчивать на новой строке

Поскольку это должен быть единственный элемент в строке, я не могу использовать отображение :inline или display:inline-block. С другой стороны, display:block не сжимается автоматически. Вот мой код:
http://jsfiddle.net/D9QV9/
Мои эксперименты с переполнением, float и очистить не дали результата. Любая помощь, советы, ссылки и т. д. приветствуются. Спасибо.

Код: Выделить всё

#outer {
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #000000;
display: block;
height: 50px;
display: block;
}

#image {
float: right;
width: 50px;
}

Код: Выделить всё

Content above div
Text inside divIMG
Content below div

Подробнее здесь: https://stackoverflow.com/questions/206 ... tent-width