title: css - container div shrink-to-fit contents
body: <p>I'm hitting a wall here, hope someone can help.</p>
  
  <p>I've got a container div with a black background that I need to dynamically "shrink-to-fit" the contents within it.  I've tried display: inline-block and several other usual fixes for this, but to no avail.</p>
  
  <p>The content inside is a large number of div boxes that are flush:left.  This number of boxes can change dynamically each time the page is loaded.</p>
  
  <p>Here's my css:</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>And my HTML:</p>
  
  <pre><code>&lt;div id="blackboard"&gt;
  
  &lt;div class="box" id="topbox1"&gt;&lt;/div&gt;&lt;div class="box" id="topbox2"&gt;&lt;/div&gt;&lt;div class="box" id="topbox3"&gt;&lt;/div&gt;&lt;div class="box" id="topbox4"&gt;&lt;/div&gt;&lt;div class="box" id="topbox5"&gt;&lt;/div&gt;&lt;div class="box" id="topbox6"&gt;&lt;/div&gt;&lt;div class="box" id="topbox7"&gt;&lt;/div&gt;&lt;div class="box" id="topbox8"&gt;&lt;/div&gt;&lt;div class="box" id="topbox9"&gt;&lt;/div&gt;&lt;div class="box" id="topbox10"&gt;&lt;/div&gt;&lt;div class="box" id="topbox11"&gt;&lt;/div&gt;&lt;div class="box" id="topbox12"&gt;&lt;/div&gt;&lt;div class="box" id="topbox13"&gt;&lt;/div&gt;&lt;div class="box" id="topbox14"&gt;&lt;/div&gt;&lt;div class="box" id="topbox15"&gt;&lt;/div&gt;&lt;div class="box" id="topbox16"&gt;&lt;/div&gt;&lt;div class="box" id="topbox17"&gt;&lt;/div&gt;&lt;div class="box" id="topbox18"&gt;&lt;/div&gt;&lt;div class="box" id="topbox19"&gt;&lt;/div&gt;&lt;div class="box" id="topbox20"&gt;&lt;/div&gt;&lt;div class="box" id="topbox21"&gt;&lt;/div&gt;&lt;div class="box" id="topbox22"&gt;&lt;/div&gt;&lt;div class="box" id="topbox23"&gt;&lt;/div&gt;&lt;div class="box" id="topbox24"&gt;&lt;/div&gt;&lt;div class="box" id="topbox25"&gt;&lt;/div&gt;&lt;div class="box" id="topbox26"&gt;&lt;/div&gt;&lt;div class="box" id="topbox27"&gt;&lt;/div&gt;&lt;div class="box" id="topbox28"&gt;&lt;/div&gt;&lt;div class="box" id="topbox29"&gt;&lt;/div&gt;&lt;div class="box" id="topbox30"&gt;&lt;/div&gt;&lt;div class="box" id="topbox31"&gt;&lt;/div&gt;&lt;div class="box" id="topbox32"&gt;&lt;/div&gt;&lt;div class="box" id="topbox33"&gt;&lt;/div&gt;&lt;div class="box" id="topbox34"&gt;&lt;/div&gt;&lt;div class="box" id="topbox35"&gt;&lt;/div&gt;
  
  &lt;div style="clear:both;"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Easier to see it here though:</p>
  
  <p><a href="http://jsfiddle.net/pbspry/L8e34tvx/" rel="noreferrer">http://jsfiddle.net/pbspry/L8e34tvx/</a></p>
  
  <p>Basically just need the container div (black) to wrap so that there is equal blackspace (just a few pixels) around the entire grid, even if the window is resized or the browser's zoom settings are increased/decreased.</p>
  
  <p>Thanks for any help!</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Looks like this can't really be done without javascript, which I don't want to use for a number of reasons.</p>
  
  <p>The easiest fix seems to be to select a certain number of boxes per row, and then put a "clear:both" after that number.  This forces a line break and then the outside div properly shrinks to fit (even at different browser zoom levels).</p>