Add this css code..
Css
p img {
float: right;
}<p>
<img src="https://www.w3schools.com/css/pineapple.jpg" /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates
iusto, odit. Numquam, sunt, dicta.
</p>Just use align attribute for the image tag element,
I think this is what you want
<p>
<img align="right" src="https://www.w3schools.com/css/pineapple.jpg" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta.
</p>As per the document on MDN the align attribute is deprecated, so CSS would be a better way to go:
img {
float: right;
}<p>
<img src="https://www.w3schools.com/css/pineapple.jpg" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta.
</p>Update:
Solution combined from the answers: The idea is to align the image to the right with the deprecated attribute “align”:
HTML code:
<div>
<p>
<img align="right" src="https://www.w3schools.com/css/pineapple.jpg" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta.
</p>
</div>
CSS code:
img {
height: 100px;
width: 100px;
margin-top: -85px /* this allows you to put the image upper */
}
div {
margin-top: 100px; /* gives you space above to display the image */
}
I have the following HTML code, which is very simple, just an image inside a paragraph.
<p>
<img src="https://www.w3schools.com/css/pineapple.jpg" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta.
</p>
And it looks like this:
And I want the image to “float” to the end of the first paragraph like below:
The only way I was able to obtain this design is to insert the image at the end of the first line, but is it any CSS code that could do that?
My HTML solution is not generic and you have to manually place the image inside paragraph:
<p>
Lorem ipsum dolor sit amet, consectetur
<img src="https://www.w3schools.com/css/pineapple.jpg" />
adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta.
</p>
You even have the word
That’s why I have put it in quotes because it did not work for me 😐
@mplungjan could you remove the association with a similar question. It’s different because it has to align to the right with the first line only of the paragraph.
the deprecated attribute “align”:
Note: the
Thank you for your answer, but it’s not placing the image at the end of the first line
its working fine for me.. can u plz add ur code in codepen?
jsbin.com/mojiholuci/edit?html,css,output
@AlinCiocan would margin-top: -85px not be what you actually wanted?
You are right. I have change it with -85px.
CSS would be preferable
I’m updating my answer, just notice that its deprecated attributes, its been ages since I used it.
Also huge dupe.
@Ma’mounothman it works with align right and then using negative top margin for image. I will post the updated solution in the question.
@Ma’mounothman Could you please modify your answer, maybe copy the solution from the question, so I can mark your answer as accepted. Also so I can remove the solution from the question. Also very important to remove the float form CSS. From my test it did not work with float.