How to place text next to the image?

Question

I want to place 2 pictures, one on top of the page and the other under it. Then I want to write something about each image, and I want the text to be located to the right of each image.

How can I do that?

I format my photos as follows, but the problem is that the pictures are similar to what they assumed, but the text looks only in the first image.

<p style="float: left; clear: left"><img src="image.jpg" height="200px" width="200px" border="1px"></p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p> <p style="float: left; clear: left"><img src="image.jpg" height="200" width="200" border="1px"></p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p> 

Answer 1

Just use some cover separators, for example:

 <div> <p style="float: left;"><img src="http://placekitten.com/g/200/200" height="200px" width="200px" border="1px"></p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p> </div> <div style="clear: left;"> <p style="float: left;"><img src="http://placekitten.com/g/200/200" height="200" width="200" border="1px"></p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p> </div> 

jsFiddle example

Answer 2

A few things can help:

• Your styles do not have to be inline, but I assume that you submit them for brevity.

• Images do not need a wrapper <p> ; styles can be applied to the <img> .

• It looks like what you really want is two different pieces of content, each with an image and text. I would suggest placing the image inside the <p> element - it is embedded, and <p> is a block. Put the image first and then place it to the left as you tried. This should achieve what you need.