7 Replies Latest reply on Mar 23, 2010 12:17 PM by Nancy OShea

    Difficulty with 1 div in CSS layout

    DeonH

      Hi there.

       

      I'm having trouble getting this 100% right.

       

      http://www.josua.co.za/Templates/josua-default.dwt.php

       

      My general layout as well as the 3 images I use as part of my header works 100%. BUT, my content does not work. The moment I add this:

      position: absolute;

      top: 145px;

       

      my footer falls away or it appears at the top of my page.

       

      I know this is only some minor adjustment but for the life of me, I cannot fix it.

       

      Please help me out.

       

      Sincere regards,

      Deon

        • 1. Re: Difficulty with 1 div in CSS layout
          osgood_ Level 8

          DeonH wrote:

           

          Hi there.

           

          I'm having trouble getting this 100% right.

           

          http://www.josua.co.za/Templates/josua-default.dwt.php

           

          My general layout as well as the 3 images I use as part of my header works 100%. BUT, my content does not work. The moment I add this:

          position: absolute;

          top: 145px;

           

          my footer falls away or it appears at the top of my page.

           

          I know this is only some minor adjustment but for the life of me, I cannot fix it.

           

          Please help me out.

           

          Sincere regards,

          Deon

          What are you adding position: absolute; top: 145px; to (which <div>)?

           

          Its pointless posting incomplete questions without enough detail for anyone to give you an answer. The best way to get an answer is to write precisely what it is you are doing and are trying to do.

          • 2. Re: Difficulty with 1 div in CSS layout
            osgood_ Level 8

            If you mean once you add the postioning to the mainContent <div> the page fails to work yes of course it will. Absolute positioning takes the content out of the normal html flow. This means that other elements around it do not react with it and assume the space it previously occupied as if were not there.

            • 3. Re: Difficulty with 1 div in CSS layout
              DeonH Level 1

              Hi there.

               

              Sorry, the telephone rang when I was writing the post and forgot to tell the rest of the story.

               

              Yes, when I add it to the content DIV the footer falls of.

              Here is an extract form my css file regarding this question:

               

              .oneColFixCtrHdr #container {

              width: 970px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */

              background: #FFFFFF;

              margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */

              border: 1px solid #000000;

              text-align: left; /* this overrides the text-align: center on the body element. */

              }

              .oneColFixCtrHdr #header {

              position: relative;

              top: 30px;

              left: 0px;

              width: 970px;

              z-index: 1;

              height: 110px;

              background-image: url(../graphics/josua-banner1-pix.jpg);

              background-repeat: repeat-y;

              }

               

              #headertext {

              position: absolute;

              top: 35px;

              right: 20px;

              z-index: 2;

              }

               

              #headerlogo {

              position: absolute;

              top: 8px;

              left: 40px;

              z-index: 3;

              }

              What do I need to do to fix this? (I know my CSS is probably very cluttered. )
              Regards,
              Deon

              • 4. Re: Difficulty with 1 div in CSS layout
                Nancy OShea Adobe Community Professional & MVP

                Simple answer.  Don't use Absolute positioning until you fully understand what it does and how it works.

                http://apptools.com/examples/pagelayout101.php

                 

                Default CSS positioning (which is no positioning at all) is usually  all you need.  To align elements within the layout, use CSS  margins, floats and text-align.

                 

                Floats and Margins Demos

                http://alt-web.com/DEMOS/3-CSS-boxes.shtml

                 

                 

                 

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

                • 5. Re: Difficulty with 1 div in CSS layout
                  osgood_ Level 8

                  DeonH wrote:

                   

                  Hi there.

                   

                  Sorry, the telephone rang when I was writing the post and forgot to tell the rest of the story.

                   

                  Yes, when I add it to the content DIV the footer falls of.

                  Here is an extract form my css file regarding this question:

                   

                   

                  .oneColFixCtrHdr #container {

                  width: 970px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */

                  background: #FFFFFF;

                  margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */

                  border: 1px solid #000000;

                  text-align: left; /* this overrides the text-align: center on the body element. */

                  }

                  .oneColFixCtrHdr #header {

                  position: relative;

                  top: 30px;

                  left: 0px;

                  width: 970px;

                  z-index: 1;

                  height: 110px;

                  background-image: url(../graphics/josua-banner1-pix.jpg);

                  background-repeat: repeat-y;

                  }

                   

                  #headertext {

                  position: absolute;

                  top: 35px;

                  right: 20px;

                  z-index: 2;

                  }

                   

                  #headerlogo {

                  position: absolute;

                  top: 8px;

                  left: 40px;

                  z-index: 3;

                  }

                  What do I need to do to fix this? (I know my CSS is probably very cluttered. )
                  Regards,
                  Deon

                   

                  What do you need to do to fix it? Stop using Absolutely Positioned <divs>. Once you make them absolutely positioned it removes them from the natural flow of the html, they act like they don't exist. Therefore the footer jumps up to consume the next available space in the natural html flow.

                  • 6. Re: Difficulty with 1 div in CSS layout
                    DeonH Level 1

                    Because this is what it looks like without any positioning.

                     

                    http://www.josua.co.za/Templates/josua-default.dwt.php

                     

                    Deon

                    • 7. Re: Difficulty with 1 div in CSS layout
                      Nancy OShea Adobe Community Professional & MVP

                      Float the image and wrap text around it like this:

                      http://alt-web.com/DEMOS/CSS2-Captions-on-floated-images.shtml

                       

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