html - Relative Positioned Child in Absolute Positioned Child... (Help) -
all right, i'm trying understand how positioning code works , make responsive in website. every bug i've come across i've been able fix myself through research online , constant staring (lol). however, i've come across rather irritating issue...
the issue -i have div positioned relative (id: news_content) , within div positioned absolute (id: page). when try move news_content using positioning commands top , left, left 1 reacting. while top command isn't moving news_content @ 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 problem truthfully... knowledge on how relative , absolute positioning wrong or code being complete haywire.
it's because #page
id doesn't have height on it. if give height: 100%;
, should it.
Comments
Post a Comment