how to display image on left and paragraph on right on the same line

001221 picture 001221 · Sep 19, 2013 · Viewed 25.9k times · Source

I want to do inline html styling, I want an image to float left and the paragraph on the right side by side on the same line, however I'm not getting the desired result with the code below:

My code is below or please view a jsFiddle

index.html

<div class="newWrapper">
    <div class="person1" style="float:left; display:inline-block; ">
        <img src=simonwilliams.jpg width="auto" height"auto" clear:both;/>
        <p style="float:right; display:block;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer arcu mauris, ullamcorper et ligula vitae, hendrerit sodales tellus. Maecenas quis pulvinar lacus.</p>
    </div>

    <div class="person2" style="float:left" display:inline-block;>
        <img src=simonwilliams.jpg width="auto" height"auto"/>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer arcu mauris, ullamcorper et ligula vitae, hendrerit sodales tellus. Maecenas quis pulvinar lacus.</p>
    </div>
</div>

Answer

Prats picture Prats · Sep 19, 2013

Add a span and make it float:left and also add the span for the <p> tag and make it float:right. At the same time if you want to do for the below div you can do the same.

 <div class="person1" style="float:left; display:inline-block; ">
        <span style="float:left;width: 20%;">
            <img src="http://www.ninahale.com/wp-content/uploads/2013/08/Google.jpg"  
             width="70" height"70" />
        </span>
        <span style="float:right;width: 80%;">
            <p style="float:right; display:block;">Lorem ipsum dolor sit amet,    
                    consectetur adipiscing elit. Integer arcu mauris, ullamcorper et 
                    ligula vitae, hendrerit sodales tellus. Maecenas quis pulvinar 
                    lacus.
            </p>
        </span>
 </div>

Demo