How to place a text next to the picture?

Question

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

How can this be done?

I am formatting my pictures as following, but the problem is that the pictures are like they were suppose to, but the text appear to be only by 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>

Google haves a lot of exemple. – Frederick Marcoux Feb 21 '12 at 03:28 — Frederick Marcoux, Feb 21 '12 at 03:28

score 38 · Accepted Answer · answered Feb 21 '12 at 03:28

Just use some wrapper divs like this:

<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

I guess I must use divs. I was trying to avoid them and new line characters. — HelpNeeder, Feb 21 '12 at 03:51

score 5 · Answer 2 · edited Jun 25 '17 at 17:37

A couple things may help:

Your styles don't need to be inline, but I'm assuming you're putting them there for brevity's sake.
The images don't need the wrapping <p>; the styles can be applied to the <img> itself.
It sounds like what you really want is two distinct chunks of content, each with an image and some text. I'd suggest placing the image inside of the <p> element - it's inline, and <p>'s are block. Put the image first, and then float it to the left, as you've tried. That should achieve what you're after.

How to place a text next to the picture?

2 Answers2

Linked

Related