Css - container contents for containers

Question

I click on the wall here, hope someone can help.

I have a container container with a black background that I need to dynamically “compress to fit” the contents inside it. I tried to display: an inline block and several other common fixes for this, but to no avail.

The content inside is a large number of div fields that are flash: on the left. This number of boxes can dynamically change every time a page loads.

Here is my css:

#blackboard { background-color: black; padding: 2px; max-width: 580px; display: inline-block; } .box { height: 40px; width: 34px; border: 1px solid black; margin: 1px; float: left; background-color: White; display: inline-block; } 

And my HTML:

 <div id="blackboard"> <div class="box" id="topbox1"></div><div class="box" id="topbox2"></div><div class="box" id="topbox3"></div><div class="box" id="topbox4"></div><div class="box" id="topbox5"></div><div class="box" id="topbox6"></div><div class="box" id="topbox7"></div><div class="box" id="topbox8"></div><div class="box" id="topbox9"></div><div class="box" id="topbox10"></div><div class="box" id="topbox11"></div><div class="box" id="topbox12"></div><div class="box" id="topbox13"></div><div class="box" id="topbox14"></div><div class="box" id="topbox15"></div><div class="box" id="topbox16"></div><div class="box" id="topbox17"></div><div class="box" id="topbox18"></div><div class="box" id="topbox19"></div><div class="box" id="topbox20"></div><div class="box" id="topbox21"></div><div class="box" id="topbox22"></div><div class="box" id="topbox23"></div><div class="box" id="topbox24"></div><div class="box" id="topbox25"></div><div class="box" id="topbox26"></div><div class="box" id="topbox27"></div><div class="box" id="topbox28"></div><div class="box" id="topbox29"></div><div class="box" id="topbox30"></div><div class="box" id="topbox31"></div><div class="box" id="topbox32"></div><div class="box" id="topbox33"></div><div class="box" id="topbox34"></div><div class="box" id="topbox35"></div> <div style="clear:both;"></div> </div> 

It’s easier to see it here:

http://jsfiddle.net/pbspry/L8e34tvx/

In principle, you just need the div container (black) to be wrapped so that there is an equal black space (just a few pixels) around the entire grid, even if you resize the window or increase / decrease browser settings.

Thanks for any help!

UPDATE

It seems like this cannot be done without javascript, which I don't want to use for a number of reasons.

The simplest fix, apparently, is to select a certain number of boxes for each row, and then put "clear: both" after that. This causes the line to break, and then the outer div is correctly compressed to fit (even at different browser zoom levels).

Answer 1

Your container already has a shrink width for matching, due to display: inline-block .

The algorithm is defined in the specification as

• Calculate preferred width by formatting content without breaking lines other than where explicit line breaks occur
• Also calculate the preferred minimum width , for example, by trying all possible line breaks. CSS 2.1 does not define an exact algorithm.
• Find the available width : in this case, the width of the containing block minus the used margin-left , border-left-width , padding-left , padding-right , border-right-width , margin-right and the width of any corresponding scroll bar.

Then the width of the compressible to the width is equal to:

 min(max(preferred minimum width, available width), preferred width) 

In your case

• The preferred width is 100 * 38 pixels = 3800 pixels
• The preferred minimum width is 38 pixels.
• The available width is probably between 38 and 3800 pixels.

Then the shrinkage width to width will be the available width. And this will be clamped using max-width: 580px .

AFAIK there is no way to achieve the desired behavior without JS. Probably the reason is that a small change can push some elements to other lines and make a significant change in the width of the container.