Carter

body {
background-color:#000000;
font-size:100%;
text-align:center;}

#content{
background-color:#000000;
border: 4px solid #D32020;
Height: 80%;
Width: 44%;
overflow-y: auto;
Position: fixed;
top: 5%;
left:27.5%;}
#infobox{
background-color:#000000;
border: 4px solid #D32020;
Height: 90%;
Width: 25%;
overflow-y: auto;
Position: fixed;
top: 5%;
left:0%;}
#friends{
background-color:#000000;
border: 4px solid #D32020;
Height: 90%;
Width: 25%;
overflow-y: auto;
Position: fixed;
top: 5%;
right:0%;}
#navi {
 z-index: 3;
 position: fixed;
 left: 32%;
 bottom: 5%;
 text-align: center;
 width: 475px;}
#navi a {
 display: inline-block;
 width: 18%;
 padding: 2px;
 font-family: Geneva;
 font-size: 12px;
 text-align: center;
 text-decoration: none;
 border-left: 1px solid #6845FF;
 border-right: 1px solid #6845FF;
 border-top: 4px double #6845FF;
 border-bottom: 1px solid #6845FF;
 color: #FFFFFF;
 letter-spacing: 3px;
 text-shadow: 0 0 0.2em #333333;
 background-color: #000000;
 transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -webkit-transition: all 0.4s ease-in-out;}
#navi a:hover {
 color: #000000;
 background-color: #000000;
 text-shadow: 0 0 0.5em #ffffff;
 letter-spacing: 1px;
 transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -webkit-transition: all 0.4s ease-in-out;}
#navi a:active {
 color: #000000;
 background-color: #ffffff;}
<div id="navi">
<a href="#01">Reset</a>
<a href="#02">Bio</a>
<a href="#03">Abilities</a>
<a href="#04">Equipment</a>
<a href="#05">OOC</a>
</div>

<div id="content">

<a name="01"></a>
<div style="width:100%; height: 100%; top: 100px; overflow: auto;" align="center;">
<img src="https://www.thefashionisto.com/wp-content/uploads/2016/12/Fashionisto-Exclusive-Christopher-Mason-007.jpg"height="545"width="599"></div>

<a name="02"></a>
<font color="red">
<div style="width:100%; height: 100%; top: 100px; overflow: auto;" align="Left">
yackyackyack</div>

<a name="03"></a>
<div style="width:100%; height: 100%; top: 100px; overflow: auto;" align="Left">
ramalamadingdong</div>

<a name="04"></a>
<div style="width:100%; height: 100%; top: 100px; overflow: auto;" align="Left">
blahblahblah</div>

<a name="05"></a>
<div style="width:100%; height: 100%; top: 100px; overflow: auto;" align="Left">
OOC GOES HERE</div>
</div>

<div id="infobox">
<font size="6"><u><b>BASICS</u></b></font size><br>
<img src="https://i.pinimg.com/originals/dc/71/48/dc7148f85650f4563875fc77d2fa7b1e.jpg"height="200"width="200"><br>
NAME: Carter Alexander Kaine<br>
AGE: <br>
GENDER: Male<br>
HEIGHT: 6'8"<br>
BUILD: Muscular<br>
HAIR COLOR: Blonde<br>
EYE COLOR: Hazel<br>
SKIN TONE: Light tan<br>
RESIDENCE: Nomadic<br>
OCCUPATION: Jack of all trades.<br>
ORIENTATION: Straight<br>
RELATIONSHIP: Unbound<br>
STATUS: Wandering<br>
</div>

<div id="friends">
<font size="6"><b><u>FRIENDS</b></u></font size><br>
<br>
<b>EARN IT</b><br>
<a href="profileurl"><img src="imgurl"height="100"width="100"></a><br>
Details go here...<br>
<br>
<b>EARN IT</b><br>
<a href="profileurl"><img src="imgurl"height="100"width="100"></a><br>
Details go here...<br>
<br>
<b>EARN IT</b><br>
<a href="profileurl"><img src="imgurl"height="100"width="100"></a><br>
Details go here...<br>
</div>