Reputation: 10296
<div style="background: green; float: right;">
<div style="background: yellow;">
<img style="float: left; width: 80px;" src="image.png" />
<div style="background: red; float: left;">
<p>Text 1</p>
<p>Text 2</p>
<p>Text 3</p>
</div>
</div>
</div>
The red div keeps displaying below the image. I want the width of the text in the paragraphs of the red div to dictate its width. I need to have the image and the red div side by side, but I don't want to provide the fixed width neither for the yellow nor for the red div. I need the automatic dynamic width of the yellow div to fit the image and the red div in one line.
Upvotes: 0
Views: 318
Reputation: 102468
Well... your code is working the way you want it. I just added more content in the paragraphs so that you can see that the red div expands to accommodate the content. The image is displayed side by side with the paragraphs.
<div style="background: green; float: right;">
<div style="background: yellow;">
<img style="float: left; width: 80px;" src="http://www.google.com/doodle4google/images/carousel-winner2012.jpg" />
<div style="background: red; float: left;">
<p>Text 1234567910</p>
<p>Text 23456789101111111</p>
<p>Text 3</p>
</div>
</div>
</div>
Here's a demo at JS Bin: http://jsbin.com/atozim/1
Just make sure you do not have any other CSS rules interfering with how your HTML structure is displayed.
Upvotes: 1