Scrolling Content With Fixed Navigation

Scrolling Content With Fixed Navigation

I'm stuck here. I can't quite figure out the correct syntax to get the
layout of my site exactly right.
I am attempting to have a side navigation of a fixed width that is 100%
height, then a top nav that is fixed height that is 100% width, finally I
want my content to take up the remaining space and have independent
scrolling.
I currently have my CSS set up as follows:
body
{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
.sideNav
{
width: 100px;
height: 100%;
float: right;
position: absolute;
top: 0;
left: 0;
background-color: green;
z-index: 3;
}
.topNav
{
width: 100%;
height: 65px;
background-color: gold;
float: right;
position: relative;
z-index: 2;
text-align: right;
}
.content
{
width: 100%;
height: 100%;
z-index: 1;
background-color: blue;
overflow-y: scroll;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: absolute;
bottom: 0;
right: 0;
padding-left: 100px;
border: 2px red inset;
margin-top: 65px;
}
Here is the Fiddle as I know this sounds confusing: jsFiddle
Let me know if there is anything else I can provide. I've exhausted all of
my ideas.