Drawing Example

AbsolutePositioning Example -- Source Code

HTML Page -- index.htm

<!DOCTYPE html>

<!-- AbsolutePositioning Example 
     Source code file: index.htm
     Display div sections using absolute positioning 
     and a background image. -->

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

    <body>
    <h1>AbsolutePositioning Example</h1>

    <div id="text">
        <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>

        <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>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>
    </div>

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

</body>
</html>

CSS Page -- styles.css

/* AbsolutePositioning Example
   Display div sections using absolute 
   positioning and a background image. */

Source code file: details.css
Use a details element to hide information. */

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

img { height: 50%; } 

div#text { position: absolute;
           top: 100px;
           left: 20px;
           width: 400px;
           border: 2px solid maroon;
           padding: 0px 10px;
           font-size: 90% }

div#pic { position: absolute;
          top: 100px;
          left: 460px; }