Drawing Example

Float Example -- Source Code

HTML Page -- index.htm

<!DOCTYPE html>

<!-- Float Example 
Source code file: index.htm
Use the CSS float property to allow text to flow around an image. -->

<html>
    <head>
        <meta content="text/html; charset=utf-8" 
              http-equiv="Content-Type">
        <title>Float Example</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>

    <body>
        <h1>Float Example</h1>
        <p>The Andromeda galaxy is the closest big galaxy to our Milky Way. 
        At 2.5 million light-years, it’s the most distant thing you can 
        see with the eye alone. Now is the time to look for it.</p>

        <img src="../images/andromeda-galaxy.jpg" alt="Andromeda Galaxy">

        <p>Although several dozen minor galaxies lie closer to our Milky Way, 
        the Andromeda galaxy is the closest large spiral galaxy to ours. Excluding 
        the Large and Small Magellanic Clouds, which can’t be seen from northerly 
        latitudes, the Andromeda galaxy, also known as M31, is the brightest galaxy 
        you can see. At 2.5 million light-years, it’s also the most distant thing 
        visible to your unaided eye.</p>

        <p>To the eye, this galaxy appears as a smudge of light larger than a 
        full moon.</p>

        <p class="clr">Reference: <br>
<a href="https://earthsky.org/clusters-nebulae-galaxies/andromeda-galaxy-closest-spiral-to-milky-way"
target="_blank">
earthsky.org/clusters-nebulae-galaxies/andromeda-galaxy-closest-spiral-to-milky-way</a></p>

    </body>
</html>

CSS Page -- styles.css

/* Float Example
   Source code file: styles.css
   Use the CSS float property to allow text to 
   flow around an image. */

body { background-color: #e0e0e0;
       color: #000060; 
       font-family: Verdana, Arial, sans-serif; }

img { float: right;
      height: 75%; 
      margin: 15px; }

p.clr { clear: both; }