Сделать плавающий текст div& #39;s плавающим и правильно обтекать без жесткого кодирования ширины div?

Взгляните на следующий jsfiddle:

http://jsfiddle.net/tTNNm/

Как сделать, чтобы div.textплавал рядом с div изображения без жесткого -кодирования ширины div.textв CSS ?

Предполагается, что div представляет собой полную ширину содержимого, а затем предполагается, что высота определяется тем, какая часть содержимого должна быть перенесена на следующую строку из-за ограничений ширины родительского элемента. Итак, в моей скрипке, почему div.textпринимает полную ширину 300 пикселей и принудительно переходит на следующую строку вместо того, чтобы вписываться рядом с div изображения с рассчитанной шириной 200 пикселей?

Ссылка:

    

        
    
    

        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    
​

div.test {
    width: 300px;
    outline: 1px solid blue;
    height: 100px;
}

div.test div {
    float: left;
    outline: 1px solid red;
}

​