Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Friday, 31 July 2020

How to Create Float Image

This tutorial is about to create float image that will always show on your corner blog althought you drag side…


To use a floating image in HTML, use the CSS property float. It allows you to float an image left or right. More property values include the following:

Sr.No.
Property Value & Description
1
none

Not floated
2
left

Floats to the left
3
right

Floats to the right
4
initial

Default value

Example

You can try to run the following code to use floating image in HTML. Here’s the usage of float right and float left CSS attribute

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Floating Image</title>
   </head>

<body>
   <h1>Float Right</h1>
   <p>The below image floats to the right.</p>
   <p>
      <img src="https://www.widecoder.com/green/images/logo.png" style="float:right" width="190" height="84" />
      This is demo text. This is demo text.
      This is demo text. This is demo text.
      This is demo text. This is demo text.
      This is demo text. This is demo text.
      This is demo text. This is demo text.
      This is demo text. This is demo text.
      This is demo text. This is demo text.
      This is demo text. This is demo text.
   </p>
   <h1>Float Left</h1>
      <p>The below image floats to the left.</p>
      <p>
         <img src="https://www.widecoder.com/green/images/logo.png" style="float:left" width="190" height="84" />
         This is demo text. This is demo text.
         This is demo text. This is demo text.
         This is demo text. This is demo text.
         This is demo text. This is demo text.
         This is demo text. This is demo text.
         This is demo text. This is demo text.
         This is demo text. This is demo text.
         This is demo text. This is demo text.
      </p>
   </body>
</html>