How do I put text that is inside a P element next to a image?

Question

Here is my code:

This is some example text that i want next to th         


        

Answer 1

you can do it without changing the html structure

As img is a inline element you can set the next sibling p to inline

By default p is a block element so it is taking full width

more about + selector

img + p {
  display: inline;
  margin-left: 10px;
  vertical-align: top; /* so that p aligns to the top of img*/
}

<img id="mepic" src="http://placehold.it/70x60" width="70" height="60">
<p>This is some example text that i want next to the image on the right hand side</p>

Answer 2

As a side note, since you tagged this as HTML5, you would be better off using <figure> and <figcaption> to mark up this content.

For example:

<figure>
   <img id="mepic" src="images/example.jpg" alt="Text" />
   <figcaption>This is some example text that i want next to the image on the right hand side</figcaption>
</figure>

Then you could style it like:

figure {
   margin: 0;
   width: 600px;
   height: auto;
   overflow: hidden;
}
figure img {
   width: 30%;
   float: left;
}
figure figcaption {
   width: 70%;
   float: right;
}

Answer 3

If you want to place text to right side of an image, here's code which will allow it:

   <p><img src="example.jpg" alt="img"> Image text here.</p>

Running example: https://jsfiddle.net/apc5spcu/

Alternately, you could use divs and make a nicer looking image form.

HTML

<div class="container">
    <div class="imgdiv">
        <img src="example.jpg" alt="img">
    </div>
    <div class="textdiv">
        <p> Image text here.</p>
        <p> Image text here.</p>
        <p> Image text here.</p>
        <p> Image text here.</p>
    </div>

This code makes use of 'Float' which positions each division next to eachother on left and right sides.

CSS

.container {
    width:540px;
}
.imgdiv {
    float:left;
    width:140px;
}
.textdiv {
    float:right;
    width:300px;
}

Running example: https://jsfiddle.net/apc5spcu/1/

Answer 4

NO CSS & JavaScript, PURE HTML

<p><img src="image.png" alt="image"/>&nbsp;Text beside image</p>

Place <img> inside a <p> can put the image surround by text. Read more here.

NOTE: <img> tag has display: inline by default and   is basic a non-breaking space, read more here.

<p>This is some text.&nbsp;
    <img src="http://placehold.it/60x60" alt="Smiley face">&nbsp;This is some text.</p><br/>
<p>
    <img src="http://placehold.it/60x60" alt="Smiley face" align="middle">&nbsp;This text is next to the image</p>