CODEWITHSUNDEEP
htmlcss-floatcss
Boris
Boris

Reputation: 10296

Floating DIVs in one line with no fixed width

<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

Answers (1)

Leniel Maccaferri
Leniel Maccaferri

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

Related Questions