Extend a div width based on its children width

Question

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?

Answer 1

Add float: left or display: inline-block to .outer.

Answer 2

add overflow: hidden; width:100%; to outer