title: Extend a div width based on its children width
body: <p>Here is my little problem (the value are just here for the example):</p>
  
  <p>Lets say I have a window with a width around 500px.
  Inside my document, I have an outer div with no specified width, but the following css:</p>
  
  <pre><code>.outer{
    white-space:nowrap;
    background:blue;
  }
  </code></pre>
  
  <p>Inside this div are 3 other div that have the following properties:</p>
  
  <pre><code>.t1{
    display:inline-block;
    width:400px;
  }
  </code></pre>
  
  <p>(notice the width of <code>400px</code>. That's where the problem is, the line is wider than the window, and the outer div does not extend.
  The HTML looks like that:</p>
  
  <pre><code>&lt;div class="outer"&gt;
      &lt;div class="t1"&gt;1&lt;/div&gt;
      &lt;div class="t1"&gt;2&lt;/div&gt;
      &lt;div class="t1"&gt;3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I'm trying to achieve is to have the 3 inner div with a blue background, without setting it for the <code>t1</code> class. What this example will produce is a blue background limited to the width of the window.</p>
  
  <p>See full example here : <a href="http://jsfiddle.net/sjCTR/">http://jsfiddle.net/sjCTR/</a> (you'll have to adapt the bottom left corner if your screen is to large)</p>
  
  <p>I'm wondering if somehow that could be achieved thru css/html only, without setting the outer div width/the inner div background?</p>