Place text next to image

Question

I’m trying to put an image and a text on the side, but I’m not getting it. The text is under the photo or I can put the first sentence of the text on the same level as the top of the image on the left.

I tried to use the display:block, to a certain extent it works, because it’s on the side of the image, but it looks like a column.

Does not look like the image above, with the text under the photo.

<div>

   <img width="186" height="186" />
   Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.

</div>

My structure is the same as the one above. The image has 186px wide.

No CSS, only HTML I thought worked.

Example:

http://jsfiddle.net/9r3d8hs2/

Answer 1

See if that’s what you want:

<table>
  <tr>
    <td><img  width="300" height="150" src='http://i.stack.imgur.com/dioLI.png'/></td>
    
    <td> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </br>
Phasellus bibendum aliquet erat, ut ornare purus malesuada et.</td> 
  </tr>
 
</table>

Answer 2

You must place the image inside a <p>/<div> and use an element align on the tag <img>.

Would look like this:

<div>
   <img align="left">
   Lorem Ipsum
</div>

Answer 3

I did it, I did it that way.

I put this property in the image and it worked.

img.face{
    float: left;
    border: transparent thin solid;
    padding: 5px;
    margin: 0px 10px 10px 0;
    max-width: 186px;
}