Moving horizontal line down through CSS
<p>I've have the horizontal line start a third way through the webpage, but getting the line to move down a bit (maybe 200-400px?) is giving me a real pain. And whenever i try to use "top:-200px;" within the style element (midline) it just makes half of the line disappear</p>

<pre><code>&lt;html&gt;
&lt;header&gt;

&lt;style&gt;


.divider{
    position:absolute;
    left:33.3%;
    top:0%;
    bottom:0%;
    border-left:5px solid black;
}

.divider2{
    position:absolute;
    left:66.6%;
    top:0%;
    bottom:0%;
    border-left:5px solid black;
}

#left {
    width:380px;
    float:left;
    margin-left: 100px
  }

#middle {
    width:380px;
    float:right;
    text-align:center;
    margin-right: 300px
    }

#right {
    width:380px;
    float:right;
    margin-left: 40px
}

#midline{
    position:relative; 
    left:530px; 
    width:1265px;
    height:5px;
    background: black;   
}

&lt;/style&gt;
&lt;/header&gt;

&lt;body style="background-image: url(https://www.planwallpaper.com/static/images/Cool-Wallpapers-Background-HD-Wallpaper.jpg);" &gt;

&lt;div id="left"&gt;
&lt;font color="white"&gt;
&lt;p&gt;

    &lt;h1&gt; Greetings!&lt;/h1&gt;

    &lt;/p&gt;

&lt;font size="6", color="white"&gt;

&lt;h3&gt;Welcome to my world ;D &lt;/h3&gt;

    &lt;p&gt;

    Heres a little information about me

    &lt;/p&gt;

    &lt;p&gt;

     A photo of me  VV

    &lt;/p&gt;

&lt;div id="midline"&gt;&lt;/div&gt;

    &lt;p&gt;

    &lt;a href="https://www.facebook.com/shan.kulkarni.9"&gt; 

    &lt;img src=file:///C:/Users/shank/Desktop/Website/02f8a12b-3edf-4a4f-981c-860f7c7c3b07.jpg Width="350" height="500" /&gt;

    &lt;/a&gt;    

    &lt;p&gt;

      Click on it and you'll go to my Facebook


    &lt;/p&gt;

    &lt;p&gt;

        &lt;a href="https://www.instagram.com/whatsittoyah_/"&gt; Follow me on instagram while you're at it ;o &lt;/a&gt;

    &lt;/p&gt;



    &lt;/div&gt;

    &lt;div class="divider2"&gt;&lt;/div&gt;


    &lt;div id="right"&gt;

    &lt;h2&gt; My Hobbies &lt;/h2&gt;

    &lt;/div&gt;


    &lt;div class="divider"&gt;&lt;/div&gt;


    &lt;div id="middle"&gt;

    &lt;h2&gt; Favorite Quotes&lt;/h2&gt;


    &lt;/div&gt;


&lt;/font&gt;





&lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p>Here is the code: 
<a href="https://jsfiddle.net/fjzcwfyx/" rel="nofollow">https://jsfiddle.net/fjzcwfyx/</a></p>