title: How can I make a div dynamically change to content width and have it remain that width even as the browser window changes size?
body: <p>Take a look at this: (Scenario 1)</p>
  
  <pre><code>#container {
      height:150px;
      border:1px solid pink;
      width:1100px;
  }
  #widget {
      display:inline-block;
      width:100px;
      height:100px;
      background-color:red;
  }​
  </code></pre>
  
  <p><a href="http://jsfiddle.net/DQFja/1/" rel="nofollow noreferrer">http://jsfiddle.net/DQFja/1/</a></p>
  
  <p>Very simple. A div with a bunch of other divs within it. Parent div has a fixed width of ~1000 pixels, children divs are set to display:inline-block; When you make the browser window smaller than the parent, a scroll bar appears and you can scroll to see the rest.</p>
  
  <p>Now take a look at this: (Scenario 2)</p>
  
  <pre><code>#container {
      height:150px;
      border:1px solid pink;
      float:left;
  }
  #widget {
      display:inline-block;
      width:100px;
      height:100px;
      background-color:red;
  }​
  </code></pre>
  
  <p><a href="http://jsfiddle.net/zZRq7/" rel="nofollow noreferrer">http://jsfiddle.net/zZRq7/</a></p>
  
  <p>Same parent and children, but the width of the parent is dynamically determined by the number of div children you place in it. Which is dandy. However, when you make the browser window smaller, the parent div becomes as wide as the window and the children start wrapping around, making the parent taller (Even though we set a fixed height!)</p>
  
  <p>How do I make the parent <code>div</code> BOTH dynamic in width as in scenario 2, but then also keep its shape/height/width when the browser window gets smaller so we can get a scrollbar?</p>