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: ```

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:…

Accepted Answer

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;
}
```

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

Solution

Problem