Question by Seb37
I have the following html:
<div class="main_container"> <div class="sub_container"> <div class="floating">wookie1</div> ... <div class="floating">wookie5</div> </div> </div>
I want sub_container to have the exact width of the sum of the floating div.
If I use “display:table;” for sub_container and “display: inline-block;” for floating divs, it works fine:
until I have enough div in the list, so that the sum of width is larger than main_container and they break on the next line:
But still, I want subcontainer (yellow background) to to be ALWAYS the EXACT WIDTH of the sum of the divs, even when they go on several lines, like this:
I’ve googled for hours now, and wasn’t able to find an elegant solution (css only, if possible.)
Here’s the jsfiddle, to play with this.