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

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -