Extend a div width based on its children width

Here is my little problem (the value are just here for the example): 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: ``` .outer{ white-space:nowrap; background:blue; } ``` Inside this div are 3 other div that have the following properties: ``` .t1{ display:inline-block; width:400px; } ``` (notice the width of `400px`. 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: ``` <div class="outer"> <div class="t1">1</div> <div class="t1">2</div> <div class="t1">3</div> </div> ``` What I'm trying to achieve is to have the 3 inner div with a blue background, without setting it for the `t1` class. What this example will produce is a blue background limited to the width of the window. See full example here : http://jsfiddle.net/sjCTR/ (you'll have to adapt the bottom left corner if your screen is to large) I'm wondering if somehow that could be achieved thru css/html only, without setting the outer div width/the inner div background?