HTML statische Seite navbar

Question

Wie kann ich meine statische rechte Navigationsleiste reparieren? Es tut mir leid, wenn das eine allgemeine Frage ist. Im Grunde versuche ich mit einer zweispaltigen Stilseite mit Kopf- und Fußzeile zu gehen. Die Kopf-, Fußzeile und das Layout sind alle fertig, aber ich habe Schwierigkeiten, die Sidebar statisch zu machen. Hier ist meine CSS:

body { 
 
    background-color: black; 
 
    color: #00FE52; 
 
    font-size: 14px; 
 
} 
 
#header { 
 
    position: fixed; 
 
    background-color: black; 
 
    color: #00FE52; 
 
    font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida  Typewriter', monospace; 
 
    font-size: 28px; 
 
    height: 80px; 
 
    width: 100%; 
 
} 
 
#content { 
 
    padding-top: 80px; 
 
    float: left; 
 
    width: 80%; 
 
    font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace; 
 
} 
 
#navbar { 
 
    position: fixed; 
 
    padding-top: 80px; 
 
    padding: 80%; 
 
    float: left; 
 
    height: (100% - 80px); 
 
    width: 20%; 
 
    font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace; 
 
} 
 
#footer { 
 
    position: fixed; 
 
    background-color: black; 
 
    text-align: center; 
 
    color: #00FE52; 
 
    font-size: 14px; 
 
    font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace; 
 
    left: 0px; 
 
    bottom: 0px; 
 
    height: 30px; 
 
    width: 100%; 
 
}

<!-- Header --> 
 
<div id="header" data-position="fixed"> 
 
    <p>Traxitor Development</p> 
 
</div> 
 

 
<!-- Content --> 
 
<div id="content"> 
 
    <p>This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This 
 
    should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should 
 
    show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show 
 
    up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up 
 
    in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in 
 
    on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on the left side. This should show up in on 
 
    the left side.</p> 
 

 

 

 

 
</div> 
 

 
<!-- Navigation Bar --> 
 
<div id="navbar"> 
 
    <p>This should show up on the right side</p> 
 

 

 

 
</div> 
 

 
<!-- Footer --> 
 
<div id="footer" data-position="fixed"> 
 
    <p>Traxitor Development - Copyright © 2016 - Theme created by <a href="https://twitter.com/9fiftyfive" style="color:#00FE52;text-decoration:none;">@9fiftyfive</a> 
 
    </p> 
 
</div>

Answer 1

Versuchen

#navbar { 
    position: fixed; 
    padding-top: 80px; 
    padding-left: 80%; 
    align: left; 
    color:#FFFFFF; 
    font-size:20px; 
    height: (100% - 80px); 
    width: 20%; 
    font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace; 
    } 

JSFIDDLE LINK