文字以div左浮动图像换行，而不是div带有右浮动图像换行

Question

I have been able to sucessfully wrap text in a div with an image to the left but I can't wrap the text in a div with the image floated to the right. I have tried floating p left. I have also tried making changing the display mode of the div with right floated image to inline and inline block. I also tried using text-align left.

Here is the code for the div were the text wraps ok.

#text_area_top  
        { 
            margin-top:5%; margin-left: 2%; 
            height: 150px; width:700px;  position:relative; 
            font-family:Arial, Helvetica, sans-serif; font-size:18px;
        }

Here is the code for the div where the text won't wrap.

#text_area_bottom
        {
            margin-top:5%; margin-left: 2%; 
            height: 150px; width:700px;  position:relative; 
            font-family:Arial, Helvetica, sans-serif; font-size:18px; 
            background-color:#00FF00; 
            text-align:left;
        }
#text_area_bottom img { float:right; }

Here is some extra code that would be important to know for solving this problem.

p { display:inline-block; position:absolute; margin:0px;   }

If there is any more information you need me to include please let me know and I will post promptly.

Here is the html:

  <div class="content">
            <div id="text_area_top">
                <img src="img.png" id="content_img" />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ornare 
                  urna et ligula lobortis sed aliquam eros eleifend. Aliquam gravida tellus mollis                   
                   massa rhoncus egestas.

                   Aliquam molestie arcu vitae est accumsan rutrum. Cras vitae tellus justo. Quisque pulvinar                adipiscing dolor, non consectetur enim  vehicula quis.Etiam tortor augue, interdum et congue a,                                  imperdiet sed risus. Cras sagittis vestibulum</p>
              </div>

              <div id="text_area_bottom">
                <img src="img.png" id="content_img2" />
                <p>Scelerisque vitae, convallis non nibh. Maecenas euismod lacinia ipsum, non vulputate metus eleifend id. Quisque sagittis posuere massa, sed pretium odio                 dignissim eu. In sit amet est non lectus semper pellentesque vitae in tellus. Nullam facilisis auctor quam at pretium.
                </p>

             </div>
</div>

Answer 1

Try that it work on my side.

p { width:500px; display:inline-block; position:relative; margin:0px; } 

just add a width for your p tag.