Dual Character Layout

<style>
@import 'https://fonts.googleapis.com/css?family=Cinzel+Decorative';

body{
background-color: #FFFFFF;
background-image: url('http://i.imgur.com/0VDE8U4.jpg');
background-attachment:fixed;
background-repeat:no-repeat;
background-position: left bottom;
background-size: cover;
}

#leftSisterName{
 position: absolute;
 left: 5vw;
 font-size: 8vh;
 font-family: Cinzel Decorative;
 color: #FFFFFF;
 text-shadow: 0.5vh 0.5vh 0.5vh #000000;
}

#rightSisterName{
 position: absolute;
 left: 55vw;
 font-size: 8vh;
 font-family: Cinzel Decorative;
 color: #FFFFFF;
 text-shadow: 0.5vh 0.5vh 0.5vh #000000;
}

#leftSister{
 position: absolute;
 left: 5vw;
 bottom: 1vh;
 width: 40vw;
 height: 85vh;
 border: 0.3vw solid #000000;
 background: rgba(0,0,0,0.6);
 overflow: hidden;
 color: #FFFFFF;
 font-family: Times New Roman;
 font-size: 2.5vh;
}
#leftSister img{
height: 100%;
}

#rightSister{
 position: absolute;
 right: 5vw;
 bottom: 1vh;
 width: 40vw;
 height: 85vh;
 border: 0.3vw solid #000000;
 background: rgba(0,0,0,0.6);
 overflow: hidden;
 color: #FFFFFF;
 font-family: Times New Roman;
 font-size: 2.5vh;
}
#rightSister img{
height: 100%;
}

#leftSisterButtons{
 z-index:2;
 list-style-type: none;
 margin: 0;
 padding: 0;
 width: 5vw;
 background: rgba(0,0,0,0.6);
 border: 0.3vw solid #000000;
 position: absolute;
 top: 13vh;
 left: 46vw;
 overflow: auto;
 font-family: Cinzel Decorative;
}

#leftSisterButtons a {
 display: block;
 color: #FFFFFF;
 text-shadow: -0.2vw 0.2vw 0.2vw #000000;
 font-size: 2vh;
 padding: 1vh 0vh 1vh 0vh;
 text-decoration: none;
}

#leftSisterButtons a:hover{
 background-color: #FFFFFF;
 color:#000000;
 text-shadow: -0.2vw 0.2vw 0.2vw #000000;
 font-size: 2vh;
}

#rightSisterButtons{
 z-index:2;
 list-style-type: none;
 margin: 0;
 padding: 0;
 width: 5vw;
 background: rgba(0,0,0,0.6);
 border: 0.3vw solid #000000;
 position: absolute;
 top: 40vh;
 left: 48.5vw;
 overflow: auto;
 font-family: Cinzel Decorative;
}

#rightSisterButtons a {
 display: block;
 color: #FFFFFF;
 text-shadow: -0.2vw 0.2vw 0.2vw #000000;
 font-size: 2vh;
 padding: 1vh 0vh 1vh 0vh;
 text-decoration: none;
}

#rightSisterButtons a:hover{
 background-color: #FFFFFF;
 color:#000000;
 text-shadow: -0.2vw 0.2vw 0.2vw #000000;
 font-size: 2vh;
}

#credit{
 position: absolute;
 right: 0.5vh;
 top: 0.5vh;
 color: #FFFFFF;
 font-size: 1.5vh;
 text-shadow: -0.2vw 0.2vw 0.2vw #000000;
 font-family: Cinzel Decorative;
 background: rgba(0,0,0,0.6);
 border: 0.3vw solid #000000;
}

a{
 text-decoration: none;
 color: #FFFFFF;
}
a:hover{
 color: yellow;
}
</style>

<div id="credit">
Code by Aishurel<br>
<a href="http://pastebin.com/khvm8x8g" target="new">Please Steal!</a>
</div>

<div id="leftSisterName">
Left Name
</div>

<div id="rightSisterName">
Right Name
</div>

<div id="leftSisterButtons">
<center>
<a href="#imageLeft"><b>Image</b></a>
<a href="#bioLeft"><b>Bio</b></a>
<a href="#moreLeft"><b>More</b></a>
</center>
</div>

<div id="rightSisterButtons">
<center>
<a href="#imageRight"><b>Image</b></a>
<a href="#bioRight"><b>Bio</b></a>
<a href="#moreRight"><b>More</b></a>
</center>
</div>

<div id="leftSister">
<div style="height: 100%; overflow-y: hidden;">

<a name="imageLeft"></a>
<div style="width:100%; height: 100%; top: 100px; overflow: auto;" align="center">
<img src="http://i64.tinypic.com/2zhhb8n.jpg">
</div>

<a name="bioLeft"></a>
<div style="width:100%; height: 100%; top: 100px; overflow: auto;" align="center">
Stuff here
</div>

<a name="moreLeft"></a>
<div style="width:100%; height: 100%; top: 100px; overflow: auto;" align="center">
More Stuff Here
</div>

</div>
</div>

<div id="rightSister">
<div style="height: 100%; overflow-y: hidden;">

<a name="imageRight"></a>
<div style="width:100%; height: 100%; top: 100px; overflow: auto;" align="center">
<img src="http://i67.tinypic.com/33kyp88.jpg">
</div>

<a name="bioRight"></a>
<div style="width:100%; height: 100%; top: 100px; overflow: auto;" align="center">
Stuff here
</div>

<a name="moreRight"></a>
<div style="width:100%; height: 100%; top: 100px; overflow: auto;" align="center">
More Stuff Here
</div>

</div>
</div>