4 Replies Latest reply on Mar 21, 2010 3:17 PM by Bruce_B

    Can't nest a div

    Bruce_B Level 1

      I've been trying to get a third div tag to nest in side the second one ("container") within the blue symbols below.  for the first two tags I got the option to insert them 'at insertion point'  with the third insertion I don't get that option anymore.  I know how to insert 'after start of tag' but what changed that I no longer have the first option?

       

       

      <body>

         <div id="MasterContainer">

            <div id="container"></div>

         </div>

      </body>

       

       

       

      Note: I have a CSS style sheet linked to the document and it is the only  one.

       

      Thanks

      Bruce

        • 1. Re: Can't nest a div
          Nancy OShea Adobe Community Professional & MVP

          <body>

          <div id="MasterContainer">

          <div id="container">

          <div id="SubContainer">

          </div> <!--end sub-->

          </div> <!--end container-->

          </div> <!--end Master-->

          </body>

           

          Without seeing all your CSS and HTML code, it's hard to discern why you couldn't add a #SubContainer to the #container div.

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          http://alt-web.com/
          http://twitter.com/altweb
          http://alt-web.blogspot.com

          • 2. Re: Can't nest a div
            Bruce_B Level 1

            Nancy~

             

            Thanks for the quick response.  Your example-code is exactly what I want...  and I can get it if use the workaround ('insert after') but I'm still confused about why the 'insertion point' item disappeared from the div dialog box.

             

            I just started the document, so I think I posted all the code, except for the stuff DW puts in when you select New>HTML>None

             

            here's the CSS file:

             

            @charset "UTF-8";
            /* CSS Document */

             

            }
            #Container {
                height: 90%;
                width: 80%;
                position: relative;
                background-color: #FFFFFF;
                overflow: hidden;
                left: 10%;
                top: 5%;
                padding: 20% 0% 0% 0%;
            }
            #MasterContainer {
                height: 950px;
                width: 100%;
                background-color: #FFFFFF;
                overflow: hidden;
                top: 5%;
            }
            #Photos {
                height: 3in;
                width: 100%;
                position: relative;
                overflow: hidden;
                top: 30px;
            }

             

            Please Note:  I'm trying to put a 'Photos' div inside the 'Container' div (which is nested inside the 'MasterContainer' div) so that's why you see the SS for #Photos

            • 3. Re: Can't nest a div
              Nancy OShea Adobe Community Professional & MVP

              I'm not sure what you're attempting, but the relative positioning isn't required for most layouts.  And overflow may be

              hindering your work in Design View.  The fact is you need to switch to Code or Split View occasionally.

               

              Try pasting this HTML into a new, blank page and see if it helps you.

               

               

              <!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=iso-8859-1" />
              <title>Untitled Document</title>
              <style type="text/css">
              
              body {
              margin:0 
              padding:0; 
              background: #333; 
              font: 67.5%/100% Arial, Helvetica, sans-serif; 
              text-align:center;}
              
              #wrapper {
              width: 968px;
              margin: 40px auto; /**centered on screen**/
              line-height: 1.5;
              background: #FFF;
              }
              
              .photos {
              float: left;
              width:  240px;
              text-align:center;
              border: 1px solid #333;
              background: #CCC;
              color: #FF0000;
              min-height: 240px;
              }
              
              /**clear floats after no longer need with a p, br or hr tag**/
              .clearing {
              clear: both;
              height: 1px;
              visibility: hidden;
              }
              </style>
              </head>
              <body>
              <div id="wrapper">
              <h1> Heading 1 / wrapper div </h1>
              <div class="photos">
              <p>photo here</p>
              <p>240px X 240px </p>
              </div>  <!--end 1st photo -->
              <div class="photos">
              <p>photo here</p>
              <p>240px X 240px </p>
              </div> <!--end 2nd photo -->
              <div class="photos">
              <p>photo here</p>
              <p>240px X 240px </p>
              </div>  <!--end 3rd photo -->
              <div class="photos">
              <p>photo here</p>
              <p>240px X 240px </p>
              </div>  <!--end 4th photo -->
              
              <!--important: clear floats at the end of last photo div -->
              <hr class="clearing" /> 
              <p>Here is some more wrapper text</p>
              </div>  <!--end wrapper -->
              </body>
              </html>
              
              

               

              Nancy O.
              Alt-Web Design & Publishing
              Web | Graphics | Print | Media  Specialists
              http://alt-web.com/
              http://twitter.com/altweb
              http://alt-web.blogspot.com

              1 person found this helpful
              • 4. Re: Can't nest a div
                Bruce_B Level 1

                Nancy~

                 

                Thanks for the help.  I used the workaround, which is just to "insert after start".  I'm still not sure why I can't just keep nesting as many boxes as I want, but the page is doing what I want it to, so I'll save the rest for later.

                 

                I'm still a newborn when it comes to DW and I'm (making the mistake of) self teaching.  I'll be in this forum a lot!

                 

                Best

                B