8 Replies Latest reply on Jul 31, 2013 1:18 PM by Nancy OShea

    Can't Get 3 Fluid Grid Div Tags to Line up Horizontally

    sneedbreedley Level 1

      I have 3 images in a row in my webpage, each in it's own fuid grid div tag. I unchecked Start New Row on the last 2 so they all line up next to each other. But not evenly. Right now I have them set so the first two float left, and the third one floats right. But how do I get them to evenly line up (in desktop view?) I'm talking about the double photo (pic1) on the left, then the words (words1) in the middle, than the double photo (pic2) on the right.

       

      Here's the page:  http://savcp.com/video-fluid.html

      Here's some fluid code:

       

       

      .gridContainer {
      margin-left: auto;
      margin-right: auto;
      width: 97.3913%;
      padding-left: 1.3043%;
      padding-right: 1.3043%;
      }
      #header {
      margin-left: auto;
      margin-right: auto;
      padding-top: 4%;
      text-align: center;
      }
      #menu {
      margin-left: auto;
      font-family: Tahoma, Geneva, sans-serif;
      font-weight: 700;
      font-size: 16px;
      text-align: center;
      margin-right: auto;
      padding-top: 2%;
      padding-bottom: 4%;
      }
      #link1 {
      width: 24%;
      font-family: "Times New Roman", Times, serif;
      font-size: 20px;
      color: #FFF;
      font-weight: 500;
      text-align: center;
      line-height: 22px;
      margin-left: 22%;
      float: left;
      }
      #link2 {
      width: 32%;
      font-size: 20px;
      font-weight: 500;
      color: #FFF;
      font-family: "Times New Roman", Times, serif;
      text-align: center;
      line-height: 22px;
      float: right;
      margin-right: 20%;
      }
      #link3 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      font-family: "Times New Roman", Times, serif;
      font-size: 20px;
      line-height: 22px;
      font-weight: 500;
      color: #FFF;
      text-align: center;
      padding-bottom: 14px;
      }
      #pic1 {
      width: 80%;
      float: none;
      margin-right: auto;
      margin-left: auto;
      text-align: center;
      }
      #words1 {
      width: 95%;
      margin-left: auto;
      margin-right: auto;
      padding: 10px;
      text-align: center;
      }
      #pic2 {
      width: 80%;
      margin-right: auto;
      margin-left: auto;
      text-align: center;
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 20px;
      padding-left: 0px;
      }

       


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

      @media only screen and (min-width: 481px) {
      .gridContainer {
      width: 98.3695%;
      padding-left: 0.8152%;
      padding-right: 0.8152%;
      }
      #header {
      width: 80%;
      }
      #menu {
      width: 90%;
      }
      #link1 {
      width: 18%;
      margin-left: 28%;

      }
      #link2 {
      width: 26%;
      margin-right: 27%;

      }
      #link3 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
      padding-bottom: 20px;

      }
      #pic1 {

       

      }
      #words1 {


      }
      #pic2 {

       

      }


      }

      /* 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: 98.5507%;
      max-width: 1232px;
      padding-left: 0.7246%;
      padding-right: 0.7246%;
      margin: auto;
      }
      #header {
      width: 70%;
      }
      #menu {
      width: 100%;

      }
      #link1 {
      width: 24%;
      font-family: "Times New Roman", Times, serif;
      font-size: 20px;
      color: #FFF;
      font-weight: 500;
      text-align: center;
      line-height: 22px;
      margin-left: 22%;
      float: left;
      }
      #link2 {
      width: 32%;
      font-size: 20px;
      font-weight: 500;
      color: #FFF;
      font-family: "Times New Roman", Times, serif;
      text-align: center;
      line-height: 22px;
      float: right;
      margin-right: 20%;
      }
      #link3 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
      font-family: "Times New Roman", Times, serif;
      font-size: 20px;
      line-height: 22px;
      font-weight: 500;
      color: #FFF;
      text-align: center;
      }
      #pic1 {
      width: 33%;
      float: left;
      margin-left: -8%;
      }
      #words1 {
      width: 40%;
      float: left;
      margin-right: auto;
      margin-left: auto;
      }
      #pic2 {
      float: right;
      width: 33%;
      margin-right: -8%;
      }

       

      }

        • 1. Re: Can't Get 3 Fluid Grid Div Tags to Line up Horizontally
          mytaxsite.co.uk Level 6

          The simplest solution is to add float in the three DIVs that are supposed to be in one line.  Change your code "Manually" to reflect these changes in BOLD letters:

           

           

          #pic1 {

              width: 80%;

              float: left;

              margin-right: auto;

              margin-left: auto;

              text-align: center;

          }

          #words1 {

              width: 95%;

              float: left;

              margin-left: auto;

              margin-right: auto;

              padding: 10px;

              text-align: center;

          }

          #pic2 {

              width: 80%;

              float: left;

              margin-right: auto;

              margin-left: auto;

              text-align: center;

              padding-top: 0px;

              padding-right: 0px;

              padding-bottom: 20px;

              padding-left: 0px;

          }

           

          When you have done these changes, you will get a better idea of how to adjust the margins and paddings so that there is enough space between the three DIVs.

           

          I am not happy about the width of the DIVs but let us see what happens.

           

          Good luck.

          • 2. Re: Can't Get 3 Fluid Grid Div Tags to Line up Horizontally
            Nancy OShea Adobe Community Professional & MVP

            Put this up near the top of your Fluid CSS code.

             

            * {

            margin: 0;

            padding: 0;

            -moz-box-sizing: border-box;

            -webkit-box-sizing: border-box;

            box-sizing: border-box;

            }

             

            Put this inside your desktop media query.  I added a border for demo purposes.  You can remove it.

             

            #pic1, #words1, #pic2 {

                 margin:0;

                 width: 33.33%;  /**equal width columns**/

                 float: left;

                 border:1px solid silver;

            }

            }

             

             

             

            Nancy O.

            • 3. Re: Can't Get 3 Fluid Grid Div Tags to Line up Horizontally
              sneedbreedley Level 1

              Mytaxsite, with your code, the 3 images are lined up vertically, one on top of the other. And if you look, I already have the 3 images floating.

              • 4. Re: Can't Get 3 Fluid Grid Div Tags to Line up Horizontally
                mytaxsite.co.uk Level 6

                sneedbreedley wrote:

                 

                Mytaxsite, with your code, the 3 images are lined up vertically, one on top of the other. And if you look, I already have the 3 images floating.

                Yes I expected that because the width of your DIVs are too big.  They add up to more than 100% and as you may know it is simply not possible mathematically (see my original post).  You need to change the width arbitrarily to 33.33% for at at least two of the DIVs so that they will add up to 100%.  The third one will be a balancing figure

                 

                No you didn't have the tree DIVs floating.  It is NOT images but DIVs that needs to float.  Completely different things.

                • 5. Re: Can't Get 3 Fluid Grid Div Tags to Line up Horizontally
                  sneedbreedley Level 1

                  Nancy, with your code the first and last images were different sizes and all images were unevenly spaced and uncentered.

                  • 6. Re: Can't Get 3 Fluid Grid Div Tags to Line up Horizontally
                    Nancy OShea Adobe Community Professional & MVP

                    It worked for me in Firefox.  How about uploading your page with the changes I gave you?

                     

                     

                    Nancy O.

                    • 7. Re: Can't Get 3 Fluid Grid Div Tags to Line up Horizontally
                      sneedbreedley Level 1

                      This is better, but still not centered:

                      http://savcp.com/video-fluid.html

                       

                      Here's the code:

                       


                      .gridContainer {
                      margin-left: auto;
                      margin-right: auto;
                      width: 97.3913%;
                      padding-left: 1.3043%;
                      padding-right: 1.3043%;
                      }
                      #header {
                      margin-left: auto;
                      margin-right: auto;
                      padding-top: 4%;
                      text-align: center;
                      }
                      #menu {
                      margin-left: auto;
                      font-family: Tahoma, Geneva, sans-serif;
                      font-weight: 700;
                      font-size: 16px;
                      text-align: center;
                      margin-right: auto;
                      padding-top: 2%;
                      padding-bottom: 4%;
                      }
                      #link1 {
                      width: 24%;
                      font-family: "Times New Roman", Times, serif;
                      font-size: 20px;
                      color: #FFF;
                      font-weight: 500;
                      text-align: center;
                      line-height: 22px;
                      margin-left: 22%;
                      float: left;
                      }
                      #link2 {
                      width: 32%;
                      font-size: 20px;
                      font-weight: 500;
                      color: #FFF;
                      font-family: "Times New Roman", Times, serif;
                      text-align: center;
                      line-height: 22px;
                      float: right;
                      margin-right: 20%;
                      }
                      #link3 {
                      clear: both;
                      float: left;
                      margin-left: 0;
                      width: 100%;
                      font-family: "Times New Roman", Times, serif;
                      font-size: 20px;
                      line-height: 22px;
                      font-weight: 500;
                      color: #FFF;
                      text-align: center;
                      padding-bottom: 14px;
                      }
                      #pic1 {
                      width: 80%;
                      float: none;
                      margin-right: auto;
                      margin-left: auto;
                      text-align: center;
                      }
                      #words1 {
                      width: 95%;
                      margin-left: auto;
                      margin-right: auto;
                      padding: 10px;
                      text-align: center;
                      }
                      #pic2 {
                      width: 80%;
                      margin-right: auto;
                      margin-left: auto;
                      text-align: center;
                      padding-top: 0px;
                      padding-right: 0px;
                      padding-bottom: 20px;
                      padding-left: 0px;
                      }

                       


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

                      @media only screen and (min-width: 481px) {
                      .gridContainer {
                      width: 98.3695%;
                      padding-left: 0.8152%;
                      padding-right: 0.8152%;
                      }
                      #header {
                      width: 80%;
                      }
                      #menu {
                      width: 90%;
                      }
                      #link1 {
                      width: 18%;
                      margin-left: 28%;

                      }
                      #link2 {
                      width: 26%;
                      margin-right: 27%;

                      }
                      #link3 {
                      clear: both;
                      float: left;
                      margin-left: 0;
                      width: 100%;
                      display: block;
                      padding-bottom: 20px;

                      }
                      #pic1 {

                       

                      }
                      #words1 {


                      }
                      #pic2 {

                       

                      }


                      }

                      /* 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: 98.5507%;
                      max-width: 1232px;
                      padding-left: 0.7246%;
                      padding-right: 0.7246%;
                      margin: auto;
                      }
                      #header {
                      width: 70%;
                      }
                      #menu {
                      width: 100%;

                      }
                      #link1 {
                      width: 24%;
                      font-family: "Times New Roman", Times, serif;
                      font-size: 20px;
                      color: #FFF;
                      font-weight: 500;
                      text-align: center;
                      line-height: 22px;
                      margin-left: 22%;
                      float: left;
                      }
                      #link2 {
                      width: 32%;
                      font-size: 20px;
                      font-weight: 500;
                      color: #FFF;
                      font-family: "Times New Roman", Times, serif;
                      text-align: center;
                      line-height: 22px;
                      float: right;
                      margin-right: 20%;
                      }
                      #link3 {
                      clear: both;
                      float: left;
                      margin-left: 0;
                      width: 100%;
                      display: block;
                      font-family: "Times New Roman", Times, serif;
                      font-size: 20px;
                      line-height: 22px;
                      font-weight: 500;
                      color: #FFF;
                      text-align: center;
                      }
                      #pic1 {
                      width: 26%;
                      float: left;
                      }
                      #words1 {
                      float: left;
                      padding-top: 0px;
                      padding-right: 0px;
                      padding-bottom: 0px;
                      padding-left: 30px;
                      width: 40%;
                      }
                      #pic2 {
                      float: left;
                      width: 26%;
                      padding-bottom: 0px;
                      padding-left: 30px;
                      }

                       

                      }

                      • 8. Re: Can't Get 3 Fluid Grid Div Tags to Line up Horizontally
                        Nancy OShea Adobe Community Professional & MVP

                        You have not implemented the solution I gave you, so I don't know what more I can tell you. box-sizing rules are important for this to work.  And your floated divs need to come as close as possible to 100%. 

                         

                        33.33% X 3 columns = 99.99999% which is about as close as you can get with an odd number of columns.

                         

                         

                        Nancy O.