6 Replies Latest reply: Sep 11, 2009 7:05 AM by watsonlance RSS

    Stacking a Div ontop of another Div inside of a div?

    watsonlance Community Member

      ok so i am not a programmer, just a designer doing a family a favor building him a website. In using divs i am trying to get a div to overlap another div, while inside another div.  confused? ok in simple: i have a div "wrapper" that holds the website center since the design is off center, inside this div i have another div which holds my body of the website "main", also inside the wrapper div i have a second div called "element" which is to sit top left and overlap the main div. The idea is to have an image cutting into the top left of the website, while keeping the rest of the site centered. I have attached a sample picture, and will post the code. if anyone can help please let me know thank you.

       

       

      CODE:

       

      <body>
      <div id="wrapper">
        <div id="element"><img src="images/Gears.gif" width="305" height="310" alt="gear image" /></div>
        <div id="main">
          <div id="header">
            <h1><img src="" alt="" name="Picture" width="100" height="180" align="right" id="Picture" style="background-color: #00FF00" />
      Don Pike <span class="eng">B.Sc. P. Eng.</span></h1>
            <h3>text</h3>
            <h3>&nbsp;</h3>
            <h3>phone </h3>
            <h3>email</h3>
            <h3> </h3>
            <h3>address</h3>
            <h3>city
      </h3>
      </div>
          <div id="content">
            <h2>
      Lorem ipsum dolor sit amet,</h2>
            <p> consectetur adipiscing elit. Suspendisse vitae pulvinar enim. Nunc eget ipsum diam, quis commodo nisi. Donec blandit mi mi, sit amet facilisis magna. Mauris eget diam est. Sed condimentum, nisi nec volutpat tincidunt, massa elit faucibus arcu, at dignissim purus tellus et velit. Integer at fringilla lacus. Nullam egestas leo vel mauris pretium gravida. </p>
         </div>
          <div id="footer">
            <table width="432" align="center" cellspacing="15">
              <tr>
                <td width="144"><a href="resume.html"><img src="images/Gears_03.gif" width="144" height="144" alt="resume" /></a></td>
                <td width="144"><img src="images/Gears_05.gif" width="144" height="144" alt="portfolio" /></td>
                <td width="122"><img src="images/Gears_07.gif" width="144" height="144" alt="about me" /></td>
              </tr>
            </table>
            <p> </p>
          </div>
        </div>
      </div>
      </body>

        • 1. Re: Stacking a Div ontop of another Div inside of a div?
          VinayKSharma Employee Hosts

          I cannot see the styles you have applied ... it is just HTML you have shared.

           

          But to get this all you need to is to absolutely position the element DIV.

           

          Do following:

           

          Add position:relative property to the styles of your Wrapper DIV (for centring you must be using margin:0 auto;)

           

          Now inside the wrapper every other div need to be absoutely positioned.

           

          For example to the element DIV add style as following:


          #element{

          position:absolute:

          left:0;

          top:0

          width:200px;

          height:200px;

          z-index;100;

          }


          Note that z-index is a key property here.

           

          similarly define for

           

          #main

          {

          position:absolute:

          left:value equal to width/2 of element div;

          top:value equal to height/2 of element div; /*this will ensure that top left corner of main div is at the center of element div */

          z-index:10 /* (less than that of element so that this lies below)*/

          rest properties

          }

           

          So on...this will do what you require.

           

           

           

          Regards,

          Vinay

          • 2. Re: Stacking a Div ontop of another Div inside of a div?
            watsonlance Community Member

            Thanks Vikrish21, not quite solved the issue but i moved me a little closer to the solution. it now displays corectly in dreamweaver but not in a browser. I am attaching the CSS so you can see any loop holes. This CSS has your changes already made.

             

             

             

             

             

            CSS

             

            #wrapper {
                width: 860px;
                position: relative;
                float: none;
                margin: 0px;
                height: auto;
                padding: 0px;
            }


            #element {

                margin: 0px;
                padding: 0px;
                height: 310px;
                width: 305px;
                position: absolute;
                z-index: 0;
            }


            #main {

                background-color: #333;
                height: auto;
                width: 550px;
                border: 1px solid 333333;
                position: absolute;
                float: right;
                padding: 0px;
                margin-right: 0px;
                margin-bottom: 0px;
                left: 155px;
                top: 125px;
            }


            #header {

                padding: 0px;
                height: 180px;
                width: 360px;
                float: none;
                position: relative;
                margin-top: 20px;
                margin-right: 20px;
                margin-bottom: 20px;
                margin-left: 170px;
            }


            #content {

                color: 555555;
                background-color: #FFF;
                padding: 20px;
                height: auto;
                width: 470px;
                margin-right: 20px;
                margin-bottom: 20px;
                margin-left: 20px;
            }


            #footer {

                background-color: #FFF;
                padding: 0px;
                height: 180px;
                width: 510px;
                margin-right: 20px;
                margin-bottom: 20px;
                margin-left: 20px;
            }


            body {

                background-color: #CCC;
            }


            h1 {

                font-family: Georgia, "Times New Roman", Times, serif;
                font-size: 25px;
                color: #FFF;
                margin: 0px;
                padding: 0px;
            }


            h3 {

                font-family: Arial, Helvetica, sans-serif;
                font-size: 12px;
                color: #CCC;
                margin: 0px;
                padding: 0px;
            }


            h2 {

                font-family: Georgia, "Times New Roman", Times, serif;
                font-size: 20px;
                color: #000;
                padding: 0px;
                margin: 0px;
            }


            p {

                font-family: Arial, Helvetica, sans-serif;
                font-size: 100%;
                color: #333;
                margin: 0px;
                padding: 0px;
            }


            .eng {
                font-size: 12px;
            }

             

            ul {
                font-family: Arial, Helvetica, sans-serif;
                font-size: 100%;
                color: #333;
            }

            • 3. Re: Stacking a Div ontop of another Div inside of a div?
              jimmyt1988

              <head>
              <style>

               

              #page{
                  width:100%;
                  height:100%;
                  text-align:center;
              }

               

              #wrapper {
                  width: 860px;
                  position: relative;
                  float: none;
                  margin: 0px;
                  height: auto;
                  padding: 0px;
                  margin:0 auto;
              }

               

               

               

              #element {
                  top:0px;
                  left:0px;
                  padding: 0px;
                  height: 310px;
                  width: 305px;
                  position: absolute;
                  z-index: 100;
              }

               


              #main {
                  background-color: #333;
                  height: auto;
                  width: 550px;
                  border: 1px solid 333333;
                  position: absolute;
                  float: right;
                  padding: 0px;
                  margin-right: 0px;
                  margin-bottom: 0px;
                  left: 155px;
                  top: 125px;
              }

               


              #header {
                  padding: 0px;
                  height: 180px;
                  width: 360px;
                  float: none;
                  position: relative;
                  margin-top: 20px;
                  margin-right: 20px;
                  margin-bottom: 20px;
                  margin-left: 170px;
              }

               


              #content {
                  color: 555555;
                  background-color: #FFF;
                  padding: 20px;
                  height: auto;
                  width: 470px;
                  margin-right: 20px;
                  margin-bottom: 20px;
                  margin-left: 20px;
              }

               


              #footer {
                  background-color: #FFF;
                  padding: 0px;
                  height: 180px;
                  width: 510px;
                  margin-right: 20px;
                  margin-bottom: 20px;
                  margin-left: 20px;
              }

               


              body {
                  background-color: #CCC;
              }

               


              h1 {
                  font-family: Georgia, "Times New Roman", Times, serif;
                  font-size: 25px;
                  color: #FFF;
                  margin: 0px;
                  padding: 0px;
              }

               


              h3 {
                  font-family: Arial, Helvetica, sans-serif;
                  font-size: 12px;
                  color: #CCC;
                  margin: 0px;
                  padding: 0px;
              }

               


              h2 {
                  font-family: Georgia, "Times New Roman", Times, serif;
                  font-size: 20px;
                  color: #000;
                  padding: 0px;
                  margin: 0px;
              }

               


              p {
                  font-family: Arial, Helvetica, sans-serif;
                  font-size: 100%;
                  color: #333;
                  margin: 0px;
                  padding: 0px;
              }

               


              .eng {
                  font-size: 12px;
              }

               

               

               

              ul {
                  font-family: Arial, Helvetica, sans-serif;
                  font-size: 100%;
                  color: #333;
              }

              </style>
              </head>

               

              <body>
              <div id = "page">
                  <div id="wrapper">
                    <div id="element"><img src="images/Gears.gif" width="305" height="310" alt="gear image" /></div>
                    <div id="main">
                      <div id="header">
                        <h1><img src="" alt="" name="Picture" width="100" height="180" align="right" id="Picture" style="background-color: #00FF00" />Don Pike <span class="eng">B.Sc. P. Eng.</span></h1>
                        <h3>text</h3>
                        <h3> </h3>
                        <h3>phone </h3>
                        <h3>email</h3>
                        <h3> </h3>
                        <h3>address</h3>
                        <h3>city</h3>
                  </div>
                      <div id="content">
                        <h2>Lorem ipsum dolor sit amet,</h2>
                        <p> consectetur adipiscing elit. Suspendisse vitae pulvinar enim. Nunc eget ipsum diam, quis commodo nisi. Donec blandit mi mi, sit amet facilisis magna. Mauris eget diam est. Sed condimentum, nisi nec volutpat tincidunt, massa elit faucibus arcu, at dignissim purus tellus et velit. Integer at fringilla lacus. Nullam egestas leo vel mauris pretium gravida. </p>
                     </div>
                      <div id="footer">
                        <table width="432" align="center" cellspacing="15">
                          <tr>
                            <td width="144"><a href="resume.html"><img src="images/Gears_03.gif" width="144" height="144" alt="resume" /></a></td>
                            <td width="144"><img src="images/Gears_05.gif" width="144" height="144" alt="portfolio" /></td>
                            <td width="122"><img src="images/Gears_07.gif" width="144" height="144" alt="about me" /></td>
                          </tr>
                        </table>
                        <p> </p>
                      </div>
                    </div>
                  </div>
              </div>
              </body>

               

               

               

              SORTED?

              • 4. Re: Stacking a Div ontop of another Div inside of a div?
                watsonlance Community Member

                who would have thought the problem with stacking a div ontop of another div inside of a div needed to have inside yet another div on it. lol

                 

                Thank you guys for all the help. now i just need to hunt that fater in law down for some content.

                • 5. Re: Stacking a Div ontop of another Div inside of a div?
                  jimmyt1988 Community Member

                  If you are still struggling..

                   

                  Put this into a new .html page:


                  <html>
                      <head>
                          <style>       
                              body{
                                  margin-top:40px;
                              }
                             
                              #page{
                                  width:100%;
                                  height:100%;
                                  text-align:center;
                                  position:absolute;
                              }
                             
                              #wrapper {
                                  width: 860px;
                                  position: relative;
                                  height: 400px;
                                  margin:0 auto;
                                  border:1px solid red;
                                  background-color:red;
                              }           
                             
                              #element {
                                  top:-30px;
                                  left:-30px;
                                  height: 300px;
                                  width: 300px;
                                  position: absolute;
                                  z-index: 100;
                                  border:1px solid green;
                                  background-color:green;
                              }
                          </style>
                      </head>   
                      <body>
                          <div id = "page">
                              <div id = "wrapper">
                                  <div id = "element">
                                  </div>
                              </div>
                          </div>
                      </body>
                  </html>

                  then save it and load it up.. It will be centered.. And it will have element floating top left of wrapping div.

                   

                  This is pretty much the best way of laying out such a website and it works in every single browser.

                  • 6. Re: Stacking a Div ontop of another Div inside of a div?
                    watsonlance Community Member

                    thanks guys, now all i need to do is complete my research on how to add a floating div ontop of the screen (simular to the image preview this site uses) so i can lauch his resume and portfolio without loading a new page.