Как сделать, чтобы ширина div зависела от содержимого?

Как ужé говорилось выше, хороший перенос блочных элементов на новую строку может быть достигнут применением строчного блока. Рекомендую для этой цели использовать нижеследующий код строчного блока, вполне испытанный многомесячным применением его в одном из основных CSS-файлов в «Традиции», русской энциклопедии:

/*  {{Строчный блок}}
 *  http://habrahabr.ru/blogs/css/96152/
 *  ↑ http://www.smashingmagazine.com/2010/06/10/50-new-useful-css-techniques-tools-and-tutorials/
 *    ↑ http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
 *      ↑ первоисточник
*/
.lineBlock {
   border: 0; margin: 0.3em 0.15em; padding: 0;
 
   display: -moz-inline-stack; /* ← Firefox 2 backwards compatibility */
   display: inline-block;
   vertical-align: top;
 
   /* ↓ IE6 & IE7 «hasLayout» voodoo */
   zoom: 1;
   *display: inline;
   /* ↑ IE6 & IE7 starhack ← http://www.ejeliot.com/blog/63 */
}

Как видите, этот код составлен по принципам, обеспечивающим обратную совместимость с Firefox 2 и IE 6 и 7.

Если рамка внешнего блока не будет совершенно прилегать ко границам внутренних строчных блоков, тогда непременно попробуйте и внешний блок также оформить в качестве строчного блока, то есть и ему назначить класс «lineBlock», описанный вышеприведённым CSS-кодом.

попробуйте вместо дива спан со свойством display:inline-block;

display: inline-block;

всего то ;)

www.artlebedev.ru/tools/technogrette/html/thumbnails-center/

Кажись оно, только у вас даже проще.

А высоту пробовали задавать?

Блин, и у меня похожая проблема =(

min-width:0;

Только в IE6 не прокатит

float:left; overflow:hidden;
а для нижних блоков clear:left;

Я бы хотел дополнить вопрос https://jsfiddle.net/badgoto/b0z9samx/ , здесь "@@@" не прилегает к тексту, ширина дива 'content' больше, чем хотелось бы. word-break: break-all - не подходит по условию задачи.