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>
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>