How to make div width dependent on content?

Question

css

Tried float: left, but in this case it only works in IE and Opera.

As is


As we would like - works in IE and Opera with float: left


When placing images, if it does not fit, it is transferred to the next line, while in the place where the image did not fit, a void is formed, the block remains stretched to full width.

Answer 1

As already mentioned above, a good wrapping of block elements to a new line can be achieved by using an inline block. I recommend for this purpose to use the following inline block code, fully tested by many months of using it in one of the main CSS files in Tradition , a Russian encyclopedia:

/*  {{Строчный блок}}
 *  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 */
}

As you can see, this code is written in a way that is backwards compatible with Firefox 2 and IE 6 and 7.
If the border of the outer box won't fit perfectly on the borders of the inner inline boxes, then by all means try to style the outer box as an inline box as well, i.e. and assign the "lineBlock" class described by the above CSS code to it.

Answer 2

try spanning div with display:inline-block property instead;

Answer 3

display: inline-block
just ;)

Answer 4

Javascript?

Answer 5

www.artlebedev.ru/tools/technogrette/html/thumbnails-center/ Seems like
it, but yours is even easier.

Answer 6

Have you tried setting the height?

Answer 7

Damn I have the same problem =(

Answer 8

min-width:0;
Only in IE6 will not work

Answer 9

float:left; overflow:hidden;
and for bottom blocks clear:left;

Answer 10

I would like to add to the question https://jsfiddle.net/badgoto/b0z9samx/ , here "@@@" is not adjacent to the text, the width of the 'content' div is larger than I would like. word-break: break-all - does not fit the task.