Увеличьте ширину блока div на основе ширины его дочерних элементов.

Вот моя маленькая проблема (значение здесь только для примера):

Допустим, у меня есть окно с шириной около 500 пикселей. Внутри моего документа у меня есть внешний div без указанной ширины, но следующий css:

.outer{
  white-space:nowrap;
  background:blue;
}

Внутри этого div есть 3 других div со следующими свойствами:

.t1{
  display:inline-block;
  width:400px;
}

(обратите внимание на ширину 400px. Вот где проблема, строка шире окна, а внешний div не расширяется. HTML выглядит следующим образом:

    
1
    
2
    
3

Я пытаюсь добиться того, чтобы 3 внутренних элемента div были с синим фоном, не устанавливая его для класса t1. Этот пример создаст синий фон, ограниченный шириной окна.

См. полный пример здесь:http://jsfiddle.net/sjCTR/(вам придется адаптировать нижний левый угол, если ваш экран слишком большой)

Мне интересно, можно ли как-то добиться этого только с помощью css/html, без установки внешнего div ширина/внутренний фон div?