CODEWITHSUNDEEP
csshtml
user4530588
user4530588

Reputation:

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

Here is my code:

<img id="mepic" src="images/example.jpg"  width="70px" height"60px">
<p>This is some example text that i want next to the image on the right hand side</p>

At the moment, the text is underneath the image. How do I put the text next to the image?

Upvotes: 4

Views: 3934

Answers (4)

Ian Devlin
Ian Devlin

Reputation: 18880

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;
}

Upvotes: 0

Vitorino fernandes
Vitorino fernandes

Reputation: 15961

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>

Upvotes: 1

XYZ
XYZ

Reputation: 27417

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 &nbsp; 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>

Upvotes: 2

Ballard
Ballard

Reputation: 899

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/

Upvotes: 0

Related Questions