Horje
How to create HTML Image Floating

Use the CSS float property to let the image float to the right or to the left of a text:


Full Example of HTML Image Floating

Smiley face A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h2>Floating Images</h2>
<p><strong>Float the image to the right:</strong></p>

<p>
<img src="https://itupto.com/avatar.png" alt="Smiley face" style="float:right;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>

<p><strong>Float the image to the left:</strong></p>
<p>
<img src="https://itupto.com/avatar.png" alt="Smiley face" style="float:left;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.  
</p>

</body>
</html>

Output should be:

Full Example of HTML Image Floating





Category:
Web Tutorial
Sub Category:
HTML Images
Uploaded by:
Admin


Read Article
https://develop.horje.com/learn/1434/reference