Search code examples
htmlcssimagetextparagraph

How to place a text next to the picture?


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>


Solution

  • 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