HTML - Floating an Image to the Right Side in HTML

Floating an Image to the Right Side in HTML

Q

How To Float an Image to the Right Side?

✍: FYIcenter.com

A

If you want to float an image to the right side of the paragraph instead of inline within a text line, you have to use the CSS property "float" to do this. The "float" property takes two values:

"float: left" - Specifies that the image to be floated to the left side of the paragraph.
"float: right" - Specifies that the image to be floated to the right side of the paragraph.

Here is a tutorial example with an image floated to the right side:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>Floating Image</title>
 </head>
 <body>
  <h4>Inline Images</h4>
  <p style="background-color: #eeeeee; padding: 8px;">
   <img src="moonrise.jpg" alt="Moonrise"
    width="69" height="91" style="float: right"/>
   "Moonrise" is a very simple to use, yet very accurate
   program. If you put it in your Startup folder, it will
   greet you everyday with the day's sunrise, sunset, 
   moonrise, moonset, and twilight times.</p>
 </body>
</html>

If you save the above document as floating_image.html, and view it with Internet Explorer, you will see an image floated to the right side of the paragraph as shown below:
HTML img Element - Floating Image

⇒HTML Inline Images and Image Maps

⇒⇒HTML Tutorials

2017-03-27, 342👍, 0💬

Reducing the Display Size of an Image in HTML
How To Reduce the Display Size of an Image? If an image embedded inline is too big when displayed in a browser, you can use "width" and "height" attributes to reduce the image's display size. The display width and height should be proportional to the actual width and height of the image. Otherwise, ... 2017-03-27, 386👍, 0💬

Server-Side Image Maps in HTML
What Is a Server-Side Image Map? A server-side image map is an image inside a hyper link. The image must be defined with the "ismap" attribute in the "img" element. When a server-side image map is clicked in a browser window, the mouse coordinates will be delivered to the server by them to the end o... 2017-03-22, 367👍, 0💬

Animated Images in HTML
What Is an Animated Image? An animated image is a special image file saved in animated GIF format. When an animated image is displayed in a browser window, multiple image frames will be displayed in sequence to form a simple animation. Here is a tutorial example with a server-side image map: &lt... 2017-03-22, 357👍, 0💬

Floating an Image to the Right Side in HTML
How To Float an Image to the Right Side? If you want to float an image to the right side of the paragraph instead of inline within a text line, you have to use the CSS property "float" to do this. The "float" property takes two values: "float: left" - Specifies that the image to be floated to the le... 2017-03-27, 343👍, 0💬

All rights in the contents of this web site are reserved by the individual author. fyicenter.com does not guarantee the truthfulness, accuracy, or reliability of any contents.