Relative Positioned Child in Absolute Positioned Child - html

Question

I'm currently trying to fully understand how all the positioning code works and to make everything responsive in my website. I've come across a rather irritating issue.
THE ISSUE
-I have a div that is positioned relative (id: news_content) and is within a div that is positioned absolute (id: page). When I try to move news_content using positioning commands top and left, left is the only one that is reacting. While the top command isn't moving news_content at all.
/*Global*/
body {
margin:0;
padding:0;
}
div {
margin:0;
padding:0;
top:0;
left:0;
bottom:0;
right:0;
}
table {
margin:0;
padding:0;
border-spacing:0;
}
/*Global Divs*/
#page {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
#nav_main {
background-color:black;
width:100%;
height:14%;
position:fixed;
z-index:0;
}
/*Navigation*/
#nav_content {
background-color:gray;
width:12.5%;
height:86%;
position:fixed;
top:14%;
z-index:-1;
}
#nav_side_container {
background-color:black;
width:60%;
height:93%;
position:relative;
top:3.5%;
left:18.75%;
}
#nav_side {
background-color:red;
width:75%;
height:93%;
position:relative;
top:3.5%;
left:12.75%;
}
#nav_side table {
width:100%;
height:100%;
font-family:'Playball';
font-size:1.25em;
font-weight:bold;
text-align:center;
}
#nav_side table td {
width:100%;
height:33.33%;
border-top:0.1em solid black;
}
/*News*/
#news_content {
background-color:red;
width:87.5%;
height:86%;
position:relative;
top:14%;
left:12.5%;
z-index:-2;
}
/*
#news {
background-color:black;
width:10em;
height:10em;
position:relative;
left:10em;
}
#news_main {
background-color:blue;
width:10em;
height:10em;
position:relative;
}
#news_side {
background-color:green;
width:10em;
height:10em;
position:relative;
}
/*Articles*/
#articles_content {
background-color:blue;
width:87.5%;
height:86%;
position:relative;
left:12.5%;
z-index:-2;
}
/*Future Plans*/
#future_content {
background-color:green;
width:87.5%;
height:86%;
position:relative;
left:12.5%;
z-index:-2;
}
<div id="page">
<div id="nav_main">
</div>
<div id="nav_content">
<div id="nav_side_container">
<div id="nav_side">
<table>
<tr>
<td>News</td>
</tr>
<tr>
<td>Articles</td>
</tr>
<tr>
<td>Future<br>Plans</td>
</tr>
</table>
</div>
</div>
</div>
<div id="news_content">
<div id="news">
</div>
<div id="news_main">
</div>
<div id="news_side">
</div>
</div>
<div id="articles_content">
</div>
<div id="future_content">
</div>
</div>
..
-No idea what the problem is to be truthfully... It could be my knowledge on how relative and absolute positioning is wrong or my code being complete haywire.

Answer 1

It's because your #page id doesn't have a height on it. If you give it height: 100%;, that should do it.