Set floating div text to float and wrap without limiting hard coding width?

Question

Take a look at the following jsfiddle:

http://jsfiddle.net/tTNNm/

How can you put div.text next to a section of an image without hard coding the width of the div.text in CSS?

It is assumed that the div should be the full width of what it has, and then the height should be determined by how much of the content should be wrapped to the next line due to the width restrictions of this parent element. So, in my violin, how did it happen that div.text occupies a full width of 300 pixels and forces itself to the next line instead of setting images with a calculated width of 200 pixels next to the div?

Link:

 <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

This is because both divs inherit float: left; Try adding this to your CSS:

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

Answer 2

This code will make sure that the text does not wrap around the image, but simply "resize" to the appropriate div (assuming 100px).

HTML

 <div class="test"> <div class="image"> <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. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> 

CSS

 div.test { width: 300px; outline: 1px solid blue; height: 100px; } div.test div.image { float: left; outline: 1px solid red; } div.test div.text { outline: 1px solid orange; padding-left:110px; }