newchar?

<style>
.pfor {display: none;}
#profile {background-color: transparent; border: 0px;}

body {background: white;}

a {text-decoration: none;}

#whole {position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;}

#test {position: absolute;
height: 400px;
width: 600px;
border: 1px solid black;
top: 100px;
left: 100px;
overflow: hidden;
}

#test2 {position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
width: 200px;
border-right: 0px solid black;
background-image:
url(http://i60.tinypic.com/2iqjyhs.jpg);
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center;
overflow: hidden;
border-right: 1px solid black;}

#test3 {position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
width: 200px;
background: gray;
z-index: 1;
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;
overflow: hidden;
}

#test3:hover {
opacity: 1;}

#test3a {
  position: absolute;
  height: 30px;
  width: 120px;
  top: 50px;
  left: 40px;
  background: black;
color: white;
text-align: center;
box-sizing: border-box;
padding-top: 7px;
overflow: hidden;
  }

#test3a.b{top: 175px !important;}

#test3a.c{top:300px !important}

#contentholder {position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 200px;
border: 0px solid red;
overflow: hidden;
}

#contentbox {
  height: 400px;
  width: 400px;
  border: 0px solid green;
overflow: auto;}


</style>

<div id="whole">

<div id="test">
<div id="test2">
</div>

<div id="test3">
<a href=#sectionone><div id="test3a">
link one
</div></a>

<a href=#sectiontwo><div id="test3a" class="b">
link two
</div></a>

<a href=#sectionthree><div id="test3a" class="c">
link three
</div></a>

</div>

<div id="contentholder">

<a name="sectionone"></a>
<div id="contentbox">
Wee.
</div>

<a name="sectiontwo"></a>
<div id="contentbox">
Wee-er.
</div>


<a name="sectionthree"></a>
<div id="contentbox">
Wee-est.
</div>



</div>