title: Make Div Smallest Possible Width
body: <p>The Fiddle: <a href="http://jsfiddle.net/GosuWhite/sXgAY/" rel="nofollow">http://jsfiddle.net/GosuWhite/sXgAY/</a></p>
  
  <p>You input numbers separated by any characters and it calculates some summary statistics. The summary statistics are output in area designated for the calculator in this divs:</p>
  
  <pre><code>&lt;div id="solWrap"&gt;
      &lt;div id="solTitles"&gt;&lt;/div&gt;
      &lt;div id="solStats"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So You'd basically have something like this:</p>
  
  <pre><code>Sample Variance:    12.212
  Population Variace: 12.291
  </code></pre>
  
  <p>I wanted to essentially center these statistics in the calculator area, but I don't know the width, so I used this:</p>
  
  <pre><code>solWrap.offsetWidth = outputTitles.offsetWidth + outputStats.offsetWidth + "px";
  </code></pre>
  
  <p>Cool, should work right? It turns out it doesn't and that's because outputStats is HIGHLY greedy and uses more width than it needs, and in fact, it actually uses all the remaining width available.</p>
  
  <p>What can I do? Don't throw Jquery at me. Libraries are nice but I prefer sweet, sweet vanilla.</p>
  
  <p>Edit: This is what I want: <a href="http://i.imgur.com/l6l4XD5.jpg" rel="nofollow">http://i.imgur.com/l6l4XD5.jpg</a>
  I want that effect, but that was achieved through actually literally setting the width of the solWrap div. Since this calculator is dynamic, I want the width dynamically generated.</p>
  
  <p>New Edit: No one has answered correctly yet.</p>
  
  <p>Here is what is going on:</p>
  
  <p>JavaScript is generating content inside two divs:</p>
  
  <pre><code>Sample Variance:    12.212
  Population Variace: 12.291
  </code></pre>
  
  <p>Div 1 will contain "Sample Variance <br> Populati..."</p>
  
  <p>And the other div will contain the data. </p>
  
  <p>These are inside of the calculator text area which has a width of 400px and are both being displayed as inline-blocks.</p>
  
  <p>The thing is when JavaScript generates this content inside of the divs, it does it corrently for the "sample variance...". It sets the width to the smallest possible value it can have.</p>
  
  <p>But when JavaScript generates the content inside the div for the numbers, it sets the width way bigger than it needs to be and in fact takes up the rest of the area inside the calculator div.</p>
  
  <p>How can I force the div that contains the numbers to be as small as it can?]</p>
  
  <p><strong>SOLUTION:</strong> I found a solution. Instead of display: inline-block, I used display: table and set the inner divs to display:table cell and it worked.</p>