You can use CSS to float an image to the left or right of the text in HTML. To do this, you can use the float
property and set it to left
or right
.
Here’s an example of how to float an image to the left of the text:
<div>
<img src="example.jpg" alt="Example Image" style="float: left; margin-right: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed elit ut libero ullamcorper finibus. Sed eget augue ut ex dapibus tempus.</p>
</div>
In this example, the <img>
tag is wrapped in a <div>
tag to group the image and text together. The float
property is set to left
to float the image to the left of the text, and the margin-right
property is used to add a small gap between the image and text.
You can also float an image to the right by setting the float
property to right
, like this:
<div>
<img src="example.jpg" alt="Example Image" style="float: right; margin-left: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed elit ut libero ullamcorper finibus. Sed eget augue ut ex dapibus tempus.</p>
</div>
In this example, the float
property is set to right
and the margin-left
property is used to add a small gap between the image and text.
Note that when you float an image, the surrounding text will wrap around it. If the image is larger than the width of its container, you may need to adjust the container’s width or use other CSS properties to control the layout.