Set floated div's text to float and wrap properly without hardcoding div width?

Question

Take a look at the following jsfiddle:

http://jsfiddle.net/tTNNm/

How do you get the div.text to be floated next to the image div without hard-coding the width of div.text in the CSS?

A div is supposed to be the full width of whatever it's content is and then the height is supposed to be determined by how much of the content needs to wrap to the next line due to width constraints of it's parent element. So in my fiddle, how come the div.text takes on the full 300px width and force itself to the next line instead of fitting in next to the image's div with a calculated width of 200px?

Reference:

<div class="test">
    <div>
        <img src="http://www.cadcourse.com/winston/Images/SoccerBall.jpg" width="100" height="100"/>
    </div>
    <div class='text'>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
</div>​

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

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

​

Answer 1

It's because both divs are inheritting the float: left;. Try adding this to your CSS:

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