3 Replies Latest reply on May 17, 2010 4:23 PM by Zabeth69

    Why Can't I Add Overflow, Auto

    Traveling Person Level 1

      Each time I try to add "Overflow, Auto" to Div 4 in the following code, it picks up the bottom three Div's, 5, 6, & 7. Can I not do this? I wanted to have it so sometimes I can add information larger than 500px in height. See code:

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      <html xmlns="http://www.w3.org/1999/xhtml">

      <head>

      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

      <title>master</title>

      <style type="text/css">

      <!--

      body {

      background-image: url(images/gold.gif);

      background-repeat: repeat;

      }

      #apDiv1 {

      position:relative;

      width:800px;

      height:800px;

      z-index:1;

      margin-right: auto;

      margin-left: auto;

      border: 5px solid #804006;

      left: 0px;

      top: 0px;

      }

      #apDiv2 {

      position:relative;

      width:800px;

      height:50px;

      z-index:1;

      background-color: #A5986F;

      margin-right: auto;

      margin-left: auto;

      top: 0px;

      left: 0px;

      }

      #apDiv3 {

      position:absolute;

      width:800px;

      height:40px;

      z-index:1;

      background-color: #CCFFCC;

      left: 0px;

      top: 50px;

      }

      #apDiv4 {

      position:absolute;

      width:800px;

      height:500px;

      z-index:1;

      background-color: #CC99CC;

      top: 40px;

      }

      #apDiv5 {

      position:absolute;

      width:400px;

      height:210px;

      z-index:1;

      background-color: #A5986F;

      top: 500px;

      }

      #apDiv6 {

      position:absolute;

      width:400px;

      height:140px;

      z-index:1;

      background-color: #A59000;

      top: 0px;

      left: 400px;

      }

      #apDiv7 {

      position:absolute;

      width:400px;

      height:70px;

      z-index:1;

      background-color: #99CC00;

      top: 140px;

      left: 0px;

      }

      -->

      </style>

      <script type="text/javascript">

      <!--

      function MM_reloadPage(init) {  //reloads the window if Nav4 resized

        if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

          document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

        else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

      }

      MM_reloadPage(true);

      //-->

      </script>

      </head>

       

      <body>

      <div align="center">

        <div id="apDiv1">

          <div id="apDiv2">

            <div id="apDiv3">

              <div id="apDiv4">

                <div id="apDiv5">

                  <div id="apDiv6">

                    <div id="apDiv7"></div>

                  </div>

                </div>

              </div>

            </div>

          </div>

        </div>

      </div>

      </body>

      </html>

        • 1. Re: Why Can't I Add Overflow, Auto
          Zabeth69 Level 5

          I'm not sure I understand your page...you have all your APdivs totally nested one within the other.


          Unless you have a good reason to do this nesting, that is what is throwing you off. Because you had styled APdiv4 to be height: 500px, when you made overflow: auto;, the page immediately sensed that you had more than 500px in height (adding in the heights of the other nested divs).

           

          I recommend you recode your APdivs to be relative divs...they will be much more cooperative.

           

          Here's a quick and dirty attempt (bold is additions or commented code):

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

          <html xmlns="http://www.w3.org/1999/xhtml">

          <head>

          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

          <title>master</title>

          <style type="text/css">

          <!--

          body {

          background-image: url(images/gold.gif);

          background-repeat: repeat;

          }

          #apDiv1 {

          position:relative;

          width:800px;

          height:800px;

          z-index:1;

          margin-right: auto;

          margin-left: auto;

          border: 5px solid #804006;

          left: 0px;

          top: 0px;

          }

          #apDiv2 {

          position:relative;

          width:800px;

          height:50px;

          z-index:1;

          background-color: #A5986F;

          margin-right: auto;

          margin-left: auto;

          /*top: 0px;

          left: 0px;
          */

          }

          #apDiv3 {

          /*position:absolute;*/
          position: relative;

          width:800px;

          height:40px;

          z-index:1;

          background-color: #CCFFCC;

          /*left: 0px;
          */
          /*top: 50px;
          */

          }

          #apDiv4 {

          /*position:absolute;*/
          position: relative;


          width:800px;

          height:500px;
          overflow: auto;

          z-index:1;

          background-color: #CC99CC;

          /*top: 40px;
          */

          }

          #apDiv5 {

          /*position:absolute;*/
          position: relative;

          width:400px;

          height:210px;
          float: left;

          z-index:1;

          background-color: #A5986F;

          /*top: 500px;
          */

          }

          #apDiv6 {

          /*position:absolute;*/
          position: relative;

          width:400px;

          height:140px;
          float: left;

          z-index:1;

          background-color: #A59000;

          /*top: 0px;

          left: 400px;
          */

          }

          #apDiv7 {

          /*position:absolute;*/
          position: relative;

          width:400px;

          height:70px;
          float: left;

          z-index:1;

          background-color: #99CC00;

          /*top: 140px;
          */
          /*left: 0px;
          */

          }

          -->

          </style>

          <script type="text/javascript">

          <!--

          function MM_reloadPage(init) {  //reloads the window if Nav4 resized

            if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

              document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

            else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

          }

          MM_reloadPage(true);

          //-->

          </script>

          </head>



          <body>

          <div align="center">

            <div id="apDiv1">

              <div id="apDiv2">this is 2</div>

                <div id="apDiv3">this is 3</div>

                  <div id="apDiv4">this is 4</div>

                    <div id="apDiv5">this is 5</div>

                      <div id="apDiv6">this is 6</div>

                        <div id="apDiv7">this is 7</div>



            </div>

          </div>

          </body>

          </html>

           

          I have commented out some of your CSS and added some (you will recognize what is new). Notice that I have also closed every div after restyling them as Relative and some of them as Floating divs.

           

          Beth

          • 2. Re: Why Can't I Add Overflow, Auto
            Traveling Person Level 1

            Thanks, any suggestion on a good, practical info on the use/difference of absolute, relative, etc.

            Thanks

            • 3. Re: Why Can't I Add Overflow, Auto
              Zabeth69 Level 5

              Most times you can survive well on simple, relative divs. Imagine them as rectangular helium balloons, stacking up against the top margin of the viewport. If they are position: relative; or no position is declared at all, they position relatively, and stack in a single column on the left side of the container (they are block elements).

               

              If you add float: left; or float: right;, the div thus styled floats up as high as the bottom of the last element and subsequent content 'flows' up around it to the same top margin. You can float several divs in a row until the horizontal space available is used up, then they drop to the next line and stack down from there.

               

              Absolute positioned divs (APdivs) are absolutely positioned in relationship with the nearest containing element with position, if there is one.

               

              So if you place an APdiv even inside a nest of four or five divs, none of which has position, the APdiv will absolutely position in relationship to the viewport itself.

               

              If you place the APdiv inside a div with position: relative; (giving it position, but not changing the way it acts), the APdiv will be absolutely positioned with relationship to that containing div. And if you place the APdiv five or six nestings in, inside a div with position, it will not regard the placement of the five or six containing divs, but will position in relationship with the one div that HAS position.

               

              This is not so complicated in theory. In practice, when one has a goal in mind, it is sometimes tricky to remember which element is influencing which other element. You have the right idea when you make a layout with colored backgrounds, as you did. I labelled the divs for my own understanding.

               

              But working it out carefully helps.

               

              Beth