4

Is there a way to make a div element fit its content AND break the line, so that the next element is under that div?

I´ve tried to set the display property to inline-block, but then the div doesn´t break the line anymore... By default, it breaks the line, but doesn´t fit its content.

Hope someone can help me.

Thanks!

Van Coding
  • 24,244
  • 24
  • 88
  • 132
  • Could you make a [jsFiddle](http://jsfiddle.net) example so people can understand more easily? – thirtydot Feb 24 '11 at 16:42
  • Here´s the example: http://jsfiddle.net/A6n2h/ I want that the box fits the text when hovering an element. Without changes on the html structure. – Van Coding Feb 24 '11 at 16:46
  • If you wanna [do it](http://stackoverflow.com/a/33511762/274502) with jQuery, you could write something *like* `$('#id container').each(function(){ $(this).parent().width($(this).width()); });`. – cregox Nov 04 '15 at 00:41

2 Answers2

4

If you're trying to do it without an extra div, I don't think there's a way. Here's how with 2 divs:

<div>
  <div style="background-color: #FF0000; display: inline">Test</div>
</div>
Sean Fujiwara
  • 4,506
  • 22
  • 34
1

Something like this buddy?

http://jsfiddle.net/A6n2h/2/

I used this CSS code:

.container div *{float:left; display:inline-block; clear:both;}

There was a few errors in your HTML code too.

Alex
  • 8,875
  • 2
  • 27
  • 44
  • This does not help when you look at this: http://jsfiddle.net/uFDK5/ I don't want that files are side by side – Van Coding Feb 24 '11 at 19:06