CODEWITHSUNDEEP
htmlcss
Learning
Learning

Reputation: 20011

How to make image show up next to para tag p

How can we make image show on right side of the paragraph where <p> i tried but it is always coming under <p>

example on fiddle http://jsfiddle.net/ECEka/44/

<div class="service-list">
    <p>text goes here text goes heretext goes heretext goes heretext goes heretext goes here
    text goes here text goes heretext goes heretext goes heretext goes heretext goes here</p>
        <p>text goes here text goes heretext goes heretext goes heretext goes heretext goes here
    text goes here text goes heretext goes heretext goes heretext goes heretext goes here</p>
    <img src="https://www.google.co.in/images/srpr/logo4w.png" alt="icon" width="200" height="auto" />
</div>

Upvotes: 1

Views: 546

Answers (2)

Paulie_D
Paulie_D

Reputation: 115278

You would have to put the image inside the p tag (at the top) and then float it right.

JS Fiddle Demo

HTML

<div class="service-list">
    <p>text goes here text goes heretext goes heretext goes heretext goes heretext goes here
        text goes here text goes heretext goes heretext goes heretext goes heretext goes here</p>
    <p>
        <img src="https://www.google.co.in/images/srpr/logo4w.png" alt="icon" width="200" height="auto" />text goes here text goes heretext goes heretext goes heretext goes heretext goes here
        text goes here text goes heretext goes heretext goes heretext goes heretext goes here</p>
</div>

CSS

.service-list {
    width: 600px;
    margin-left:0px;
    padding-left:0px;
    display: block;
    background-color:yellow;
}
.service-list p img {
    float:right;
}
.service-list p {
    text-align: left;
    display:block;
    padding: 0;
}

Upvotes: 0

Mihey Egoroff
Mihey Egoroff

Reputation: 1542

Change the order of html: put <img> before <p>;

DEMO

Is that what you're looking for?

Upvotes: 4

Related Questions