HTML静的サイドナビゲーションバー

Question

静的な右ナビゲーションバーを修正するにはどうすればよいですか？これが一般的な質問であればごめんなさい。基本的には、ヘッダーとフッターが付いた2列のスタイルのサイトに移動しようとしています。ヘッダー、フッター、レイアウトはすべて完了していますが、サイドバーを静的にするのは難しいです。ここに私の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

#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