20 Replies Latest reply: Jun 11, 2014 9:45 AM by Nancy O. RSS

    Fluid grid css not positioning divs

    garyt88 Community Member

      Hi,

      I've been having this problem for days now and I'm in need of help.

      The css:-

      @charset "utf-8";
      /* Simple fluid media
         Note: Fluid media requires that you remove the media's height and width attributes from the HTML
         http://www.alistapart.com/articles/fluid-images/
      */
      body {background-color: white;}
      img, object, embed, video {
      max-width: 100%;
      }

      /* IE 6 does not support max-width so default to width 100% */
      .ie6 img {
      width:100%;
      }

      /*
      Dreamweaver Fluid Grid Properties
      ----------------------------------
      dw-num-cols-mobile:  4;
      dw-num-cols-tablet:  8;
      dw-num-cols-desktop: 12;
      dw-gutter-percentage: 25;

      Inspiration from "Responsive Web Design" by Ethan Marcotte
      http://www.alistapart.com/articles/responsive-web-design

      and Golden Grid System by Joni Korpi
      http://goldengridsystem.com/
      */


      .fluidList {
      list-style: none;
      list-style-image: none;
      margin: 0;
      padding: 0;
      top: 25px;
      }

      /* Mobile Layout: 480px and below. */
       
      .gridContainer {
      margin-left: auto;
      margin-right: auto;
      width: 86.45%;
      padding-left: 2.275%;
      padding-right: 2.275%;
      clear: none;
      float: none;
      }
      #div1 {
      }
      .zeroMargin_mobile {
          margin-left: 0;
      }
      .hide_mobile {
          display: none;
      }

      /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

      @media only screen and (min-width: 481px) {

      .gridContainer {
      width: 90.675%;
      padding-left: 1.1625%;
      padding-right: 1.1625%;
      clear: none;
      float: none;
      margin-left: auto;
      top: 25px;
      }


      #div1 {
      }
      .zeroMargin_tablet {
          margin-left: 0;
      }
      .hide_tablet {
          display: none;
      }

      /* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout.
      */

      @media only screen and (min-width: 769px) {

      .gridContainer {
      width: 88.5%;
      max-width: 1232px;
      padding-left: 0.75%;
      padding-right: 0.75%;
      margin: auto;
      clear: none;
      float: none;
      margin-left: auto;
      overflow:auto;

      }

       

      #stage2 {
      position: absolute;
        left:0;
          right:0;
          margin-left:auto;
          margin-right:auto;
      top: 35px;
      z-index: 0;
      }

      #stage3 {
      position: absolute;
        left:0;
          right:0;
          margin-left:auto;
          margin-right:auto;
      top: 210px;
      z-index: -1;
      }


      .zeroMargin_desktop {
          margin-left: 0;
      }
      .hide_desktop {
          display: none;
      }
      }

       

      the HTML:-

        
       
       
       

      hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh nnnnnnnnnnnnnnnnnnnn bvcccccccccccccccccc mjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj

       

      I want the "stage3" div to start 35px from the top of the web page and the subsequent divs to follow on below it. When I run it the "stage" div starts about 140px from the top of  the  page  and the subsequent divs follow on below it.. no matter what I change the top px to the divs don't move at all.  Any help would be greatly appreciated.

        • 1. Re: Fluid grid css not positioning divs
          Nancy O. MVP

          Do not use position absolute in Fluid Grid Layouts.  It does not work in Responsive Web Design because APDivs are removed form the normal content flow and thus don't respond to other elements on the page.

           

          Use default CSS positioning (static or none) along with margins, padding & floats.

           

          /**side by side**/

          #stage2 {

          margin-top: 120px;

          width: 50%; /**adjust width as required**/

          float:left;
          }

          #stage3 {

          margin-top: 120px;

          width:50%;

          float:left;

          }

           

          Nancy O.

          • 2. Re: Fluid grid css not positioning divs
            garyt88 Community Member

            Hi Nancy,

            I put this-


            #stage2 {

              left:0;
                right:0;
                margin-left:auto;
                margin-right:auto;
            margin-top: 35px;
            z-index: 0;
            }

            #stage3 {
              left:0;
                right:0;
                margin-left:auto;
                margin-right:auto;
            margin-top: 210px;
            z-index: -1;
            }

             

            Divs still haven't moved up.

            • 3. Re: Fluid grid css not positioning divs
              MurraySummers ACP/MVPs

              Just a comment -

               

              Only positioned elements (absolute/relative/fixed) have a z-index, so your specification of that style is irrelevant. The same is true for the top/right/bottom/left styles. You should remove them all. Static elements on your page can only be 'moved' by adjusting margin/padding, or floats.

              • 4. Re: Fluid grid css not positioning divs
                garyt88 Community Member

                Thanks for replying.  I've now got this:-

                 

                .gridContainer {
                width: 88.5%;
                max-width: 1232px;
                padding-left: 0.75%;
                padding-right: 0.75%;
                margin: auto;
                clear: none;
                float: none;
                margin-left: auto;
                overflow:auto;

                }

                #stage2 {
                  position: static;
                  left:0;
                    right:0;
                    margin-left:auto;
                    margin-right:auto;
                padding-top: 40px;

                }

                #stage3 {
                position: static;
                  left:0;
                    right:0;
                    margin-left:auto;
                    margin-right:auto;
                padding-top: 200px;

                }

                 


                Divs haven't moved up.

                • 5. Re: Re: Fluid grid css not positioning divs
                  Nancy O. MVP

                  #stage2 {

                  margin: 40px auto;

                  width: 100%;
                    position: static;
                    left:0;
                      right:0;
                      margin-left:auto;
                      margin-right:auto;
                  padding-top: 40px;

                  }

                  #stage3 {

                  margin: 200px auto;

                  width:100%;
                  position: static;
                    left:0;
                      right:0;
                      margin-left:auto;
                      margin-right:auto;
                  padding-top: 200px;

                  }

                   

                  Please review the CSS Box Model:

                  CSS Box Model

                   

                   

                   

                  Nancy O.

                  • 6. Re: Re: Fluid grid css not positioning divs
                    garyt88 Community Member

                    I know why I couldn't move my divs to the top of the page: I didn't have

                    body {margin: 0px;}

                     

                    in my css. Without it, everything was starting about 150-200px from the top of the page no matter what I did. why would that be?

                    • 7. Re: Fluid grid css not positioning divs
                      Nancy O. MVP

                      By default, browsers add margins & padding to all HTML elements including the body, headings, paragraphs, lists, etc...  Most of use a use a CSS reset method of some kind in our style sheets.

                       

                      /**Universal CSS Reset**/

                      * {

                          margin: 0;

                          padding: 0;

                      /**fix the box model in Fluid Layouts**/

                          -webkit-box-sizing: border-box;

                          -moz-box-sizing: border-box;

                          box-sizing: border-box;

                      }

                      CSS-Reset Tool : CSSresetr

                      http://css-tricks.com/box-sizing/

                       

                      Nancy O.

                      • 8. Re: Re: Fluid grid css not positioning divs
                        garyt88 Community Member

                        Thanks Nancy

                        • 9. Re: Fluid grid css not positioning divs
                          MurraySummers ACP/MVPs

                          Most, but not all - I don't use one ever...

                          • 10. Re: Fluid grid css not positioning divs
                            Nancy O. MVP

                            I readily admit that the universal Reset I posted above is a sledgehammer because it resets every little thing except the kitchen sink.  In production work, I'm more selective about what I reset.

                             

                             

                            Nancy O.

                            • 11. Re: Fluid grid css not positioning divs
                              garyt88 Community Member

                              How would you reset individual items in a fluid grid css?

                              • 12. Re: Fluid grid css not positioning divs
                                Nancy O. MVP

                                Use a separate external style sheet for your content styles.  Zero out margins & padding where needed.

                                 

                                 

                                Nancy O.

                                • 13. Re: Fluid grid css not positioning divs
                                  garyt88 Community Member

                                  Another problem;-

                                  As you suggested, Nancy, I entered-

                                  * {

                                      margin: 0;

                                      padding: 0;

                                  /**fix the box model in Fluid Layouts**/

                                      -webkit-box-sizing: border-box;

                                      -moz-box-sizing: border-box;

                                      box-sizing: border-box;

                                  }

                                   

                                  into my css. I didn't like it as it made a big empty box appear below my drop down menu and the rest of my content came after the box so I had a large empty gap on the page. So I deleted the code for the box from the css but the box is still there! How do I get rid of the box?

                                  • 14. Re: Fluid grid css not positioning divs
                                    Nancy O. MVP

                                    Refresh (F5).

                                     

                                    Nancy O.

                                    • 15. Re: Fluid grid css not positioning divs
                                      garyt88 Community Member

                                      I've refreshed many times, the box is still there. I've even started a new web and css page but when I put-

                                      #stage2 {

                                      margin: 80px;

                                      width: 100%;

                                       

                                      }

                                      in the css the box comes back.

                                      • 16. Re: Fluid grid css not positioning divs
                                        Nancy O. MVP

                                        margin: 80px ???

                                        adds 80px of margins to the top, right, bottom and left sides of your box.

                                        try margin: 0;

                                         

                                         

                                        Nancy O.

                                        • 17. Re: Fluid grid css not positioning divs
                                          garyt88 Community Member

                                          I did that and it got rid of the hole but it sent my drop down menu to the top of the page. so I tried

                                          top: 180px;          that did nothing.
                                          I tried-

                                          padding-top: 180px;  and the hole has come back!  It's very annoying.

                                          • 18. Re: Fluid grid css not positioning divs
                                            Nancy O. MVP

                                            We're just going in circles here.  If you want further help with your layout/coding issues, you really need to upload your work and dependent files to your remote server and post the URL here.  That's the only way we can help you.  Anything less is just guesswork.

                                             

                                            In the meantime, below is a FluidGrid Layout example.  View source to see the code.

                                            Alt-Web :: Fluid Grid Test #4

                                             

                                             

                                            Nancy O.

                                            • 19. Re: Fluid grid css not positioning divs
                                              garyt88 Community Member

                                              I've sorted out the box problem by restarting from scratch. Now I've another problem similar the first one.

                                              html-

                                              <body>
                                              <div id="slidetop" class="gridContainer clearfix">
                                              <div id="topslide" class="EDGE-7543888"></div>
                                              </div>
                                              <div id="menutwo" class="gridContainer clearfix">
                                              <div id="menutop" class="EDGE-33203081"></div>
                                              </div>

                                              <div id="contenttop" class="gridContainer clearfix">
                                                <div>Testing.</div>
                                              </div>

                                              </body>
                                              </html>

                                               

                                              the first 2 divs follow each other but the third div remains at the top. I've got no css styling for the third divs as the first 2 divs are static.

                                              css-

                                              .gridContainer {
                                              width: 93.4166%;
                                              max-width: 1232px;
                                              padding-left: 0.7916%;
                                              padding-right: 0.7916%;
                                              margin: auto;
                                              clear: none;
                                              float: none;
                                              margin-left: auto;

                                              }

                                              #topslide {
                                              margin: 4px auto;
                                              width: 100%;

                                              }

                                              #menutop {
                                              margin: 183px auto;
                                                width: 100%;

                                              }


                                              .zeroMargin_desktop {
                                                  margin-left: 0;
                                              }
                                              .hide_desktop {
                                                  display: none;
                                              }

                                              }

                                              So why isn't the third div following on from the first two divs?

                                              • 20. Re: Fluid grid css not positioning divs
                                                Nancy O. MVP

                                                First, build Mobile first.  That is what everything else is based on.  Then build Tablet and finally Desktop. To be responsive, everything must be placed inside the .gridContainer div like this:

                                                 

                                                <body>

                                                <div class="gridContainer clearfix">

                                                <div id="slidetop">

                                                <h3>slidetop</h3>

                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

                                                </div>

                                                 

                                                <div id="topslide" class="EDGE-7543888">

                                                <h3>topslide</h3>

                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

                                                </div>

                                                 

                                                <div id="menutwo">

                                                menutwo

                                                <ul>

                                                <li>Menu 1</li>

                                                <li>Menu 2</li>

                                                <li>Menu 3</li>

                                                <li>Menu 4</li>

                                                <li>Menu 4</li>

                                                </ul>

                                                </div>

                                                 

                                                <div id="menutop" class="EDGE-33203081">

                                                menutop

                                                <ul>

                                                <li>Menu 1</li>

                                                <li>Menu 2</li>

                                                <li>Menu 3</li>

                                                <li>Menu 4</li>

                                                <li>Menu 4</li>

                                                </ul>

                                                </div>

                                                 

                                                <div id="contenttop">

                                                <h3>contenttop</h3>

                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

                                                </div>

                                                 

                                                <!--end gridContainer--></div>

                                                </body>

                                                </html>