20 Replies Latest reply: Apr 2, 2014 1:10 PM by MurraySummers RSS

    How To Align Divs to appear on different devices

    A.Cambria Community Member

      Hello,

      I have tried to figure this out on my own but am having no luck. I am trying to insert 6  boxes (300x200px) within my fluid grid div "content" I would like them to display as follows:

       

      Desktop;

       

      BOX  BOX  BOX

      BOX  BOX  BOX

       

      Tablet

      BOX BOX
      BOX BOX
      BOX BOX

       

      and mobile

      BOX all floated left in 1 row.

       

      For startersI tried manipulating a single box to align center. I created a div with an ID box and did not specify a class. In my style sheet ,under special rules for desktop, I added

      #box {

      margin-right:auto;

      margin-left:auto;

      }

       

      My plan was to add special rules under tablet and mobile to float the div "box" in the appropriate direction but the change I made to the mystyles.css had to effect. What is the best way to approach this?

      Thanks

      Andrea

        • 1. Re: How To Align Divs to appear on different devices
          MurraySummers ACP/MVPs

          <div id="container">

               <div class="do_this_for_each_internal_box">BOX</div>

               ...

          </div>

           

          And this CSS -

           

          #container {

          max-width: /* put 3 x box width + padding or margin */;

          overflow:hidden;

          }

          .do_this_for_each_internal_box {

          width:/* whatever */;

          float:left;

          margin-left:/* whatever */;

          }

          • 3. Re: How To Align Divs to appear on different devices
            A.Cambria Community Member

            Hi Nancy,

             

            I created a  template with the fluid grid design. I am trying to modify a single page in my site without touchng the fluid.css file.. I have a fluid grid div called “content” set at 100%. On a single page  I would like to divide this div into 2 rows of 3  boxes 300x200 pixels wide. Because the boxes have a fixed width I would like them to shift over when the div resizes across different devices as opposed to shrinking in size.  Is there a way to use the CSS panel to apply CSS rules for desktop/tablet/mobile in the same manner as manipulating fluid grid divs? I found any changes I make apply to all and are not screen size specific. Do I need to learn how to do a media query? I hope I explained this better.

             

            Thanks

             

            Andrea

            • 4. Re: How To Align Divs to appear on different devices
              osgood_ MVP

              Seems to me what you are doing kind of defeats the objective of responsive design if you want the boxes to be a specific width and height. You would have to create your media query break points in multiples of 300px as shown below in the example code.

               

              You know the sum of the combined boxes for desktop will be 900px, for tablet 600px and smartphone 300px so not sure why you are setting the 'content' <div> to 100%? You would just need to set it at 900px then reduce that to 600px and 300px respectively. However as I say that's a very specific width and most likely will be hit and miss on the myriads of different mobile devices out there.

               

              I don't know what is in these boxes which requires them to be set at such a designated width and height.

               

               

               

              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

              <html>

              <head>

              <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

              <title>Untitled Document</title>

              <style>

              body {

                  margin: 0;

                  padding: 0;

              }

              #content {

                  width: 900px;

                  overflow: hidden;

                  margin: 0 auto;

              }

              .box {

                  width: 300px;

                  height: 200px;

                  float: left;

              }

              .one {

                  background-color:#FFC;

              }

              .two {

                  background-color:#CFF;

              }

              .three {

                  background-color:#FCF

              }

               

              .four {

                  background-color:#9CC

              }

               

              .five {

                  background-color:#CCC

              }

               

              .six {

                  background-color:#CC9;

              }

               

               

              @media screen and (max-width: 600px) {

                  #content {

                  width: 600px;

                  overflow: hidden;

                  margin: 0 auto;

              }

               

              }

               

              @media screen and (max-width: 300px) {

                  #content {

                  width: 300px;

                  overflow: hidden;

                  margin: 0 auto;

              }

               

              }

               

               

               

              </style>

              </head>

               

              <body>

              <div id="content">

              <div class="box one">Box 1</div>

              <div class="box two">Box 2</div>

              <div class="box three">Box 3</div>

              <div class="box four">Box 4</div>

              <div class="box five">Box 5</div>

              <div class="box six">Box 6</div>

              </div>

              </body>

              </html>

              • 5. Re: How To Align Divs to appear on different devices
                A.Cambria Community Member

                Hello,

                 

                I am trying to position images with a single line of text on the page.  That is what  the “box” divs  are for.  Maybe I am over complicating things. If I have a fluid grid div  “content” set  at 100% how do I display a fixed width image  3 in a row horizontal in desktop, two in a row in tablet and separate row in mobile? Isn’t there a way to have them shift  down a row when the div gets smaller?

                 

                Thanks

                 

                Andrea

                • 7. Re: How To Align Divs to appear on different devices
                  MurraySummers ACP/MVPs

                  See my first post...

                  • 8. Re: How To Align Divs to appear on different devices
                    A.Cambria Community Member

                    Hello,

                     

                    Thanks. I’m going to try it out.  I m pretty sure I forgot to set the overflow to hidden in my prior attempts.

                     

                    Thanks for all your help

                     

                    Andrea

                    • 9. Re: How To Align Divs to appear on different devices
                      MurraySummers ACP/MVPs

                      What the overflow:hidden does is to make the floats only affect items that lie within the container. An escaped float (i.e., one that is not properly managed like this or with a clearing element) can wreck a resonable layout.

                      • 10. Re: How To Align Divs to appear on different devices
                        Nancy O. MVP

                        In addition to Murray's suggestion about overflow:hidden, you'll probably need to apply the clearfix class to your container since those floats will need to be cleared at the end.

                         

                        <div id="content clearfix">

                         

                         

                        Nancy O.

                        • 11. Re: How To Align Divs to appear on different devices
                          MurraySummers ACP/MVPs

                          But that's what overflow:hidden does, no?

                          • 12. Re: How To Align Divs to appear on different devices
                            Nancy O. MVP

                            It depends on what else Andrea's FluidGrid Layout contains.  Since clearfix is an existing boilerplate class, it won't hurt to add it.

                             

                             

                             

                            Nancy O.

                            • 14. Re: How To Align Divs to appear on different devices
                              osgood_ MVP

                              A.Cambria wrote:

                               

                              Hello,

                               

                              I am trying to position images with a single line of text on the page.  That is what  the “box” divs  are for.  Maybe I am over complicating things. If I have a fluid grid div  “content” set  at 100% how do I display a fixed width image  3 in a row horizontal in desktop, two in a row in tablet and separate row in mobile? Isn’t there a way to have them shift  down a row when the div gets smaller?

                               

                              Thanks

                               

                              Andrea

                              If you set the content <div> at 100% then you will always have a space on the right hand side because the boxes are set at a specific width and not at a percent width to adjust to the flexible content width. Don't know it that is the effect you want, if so then fine.

                               

                              Plus there is no need to add clearfix (old coding) - overflow: hidden; does the job just fine at clearing floats in a container <div>

                              • 15. Re: How To Align Divs to appear on different devices
                                MurraySummers ACP/MVPs

                                But there may be other things in that container where you do not want the hidden overflow, like scrolling areas. As Nancy sez, it doesn't hurt to add the clearfix since it's already a part of the boilerplate CSS.

                                • 16. Re: How To Align Divs to appear on different devices
                                  osgood_ MVP

                                  MurraySummers wrote:

                                   

                                  But there may be other things in that container where you do not want the hidden overflow, like scrolling areas. As Nancy sez, it doesn't hurt to add the clearfix since it's already a part of the boilerplate CSS.

                                   

                                   

                                  No, overflow: hidden; only affects maybe a navigation drop down where you have used it on the nav container to clear floated <li> tags maybe.

                                   

                                  It won't affect a scrolling area in a content <div> set to overflow: hidden; -

                                   

                                   

                                  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

                                  <html>

                                  <head>

                                  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

                                  <title>Untitled Document</title>

                                  <style>

                                  #content {

                                      width: 100%;

                                      max-width: 900px;

                                      overflow: hidden;

                                  }

                                  .box {

                                      float: left;

                                      width: 300px;

                                      height: 200px;

                                  }

                                  .one {

                                  background-color:#CCC;

                                  }

                                  .two {

                                  background-color:#FCC;

                                  }

                                  .three {

                                  background-color:#CCF;

                                  }

                                  #scroll {

                                  height: 200px;

                                  background-color:#FC9;

                                  clear: both;

                                  overflow: scroll;

                                  }

                                  </style>

                                  </head>

                                   

                                  <body>

                                  <div id="content">

                                  <div class="box one">Box 1</div>

                                  <div class="box two">Box 2</div>

                                  <div class="box three">Box 3</div>

                                  <div id="scroll">

                                  <p>This is a scrollable area</p>

                                  <p>This is a scrollable area</p>

                                  <p>This is a scrollable area</p>

                                  <p>This is a scrollable area</p>

                                  <p>This is a scrollable area</p>

                                  <p>This is a scrollable area</p>

                                  <p>This is a scrollable area</p>

                                  <p>This is a scrollable area</p>

                                  <p>This is a scrollable area</p>

                                  <p>This is a scrollable area</p>

                                  <p>This is a scrollable area</p>

                                  <p>This is a scrollable area</p>

                                  <p>This is a scrollable area</p>

                                  <p>This is a scrollable area</p>

                                  </div>

                                  <p>This is the bottom of the content div</p>

                                  </div>

                                  </body>

                                  </html>

                                  • 17. Re: How To Align Divs to appear on different devices
                                    Nancy O. MVP

                                    The OP is using FluidGrid Layouts.  I don't know if you've experimented with them yet, but they are a slightly different beast.

                                     

                                    osgood_ wrote:

                                     

                                    No, overflow: hidden; only affects maybe a navigation drop down where you have used it on the nav container to clear floated <li> tags maybe.

                                     

                                    Overflow:hidden is known to cause problems when used with positioned elements.   Since I rarely use positioning, it doesn't come up often.  But every once in a while it rears its ugly head.

                                     

                                    Nancy O.

                                    • 18. Re: How To Align Divs to appear on different devices
                                      osgood_ MVP

                                      Nancy O. wrote:

                                       

                                      The OP is using FluidGrid Layouts.  I don't know if you've experimented with them yet, but they are a slightly different beast.

                                       

                                      osgood_ wrote:

                                       

                                      No, overflow: hidden; only affects maybe a navigation drop down where you have used it on the nav container to clear floated <li> tags maybe.

                                       

                                      Overflow:hidden is known to cause problems when used with positioned elements.   Since I rarely use positioning, it doesn't come up often.  But every once in a while it rears its ugly head.

                                       

                                      Nancy O.

                                       

                                      No, I try to avoid the rubbish which ships with DW as it's an inferior way of working.

                                       

                                      I've never used clearfix and never come across any issues with overflow: hidden; - could be the workflow I don't know as my experiences have been 100% positive.

                                      • 19. Re: How To Align Divs to appear on different devices
                                        A.Cambria Community Member

                                        Hi Murray,

                                         

                                        I just wanted to thank you personally for the css help. Im starting to get a grasp on the subject. I modified quite a few pages using the building blocks you showed me. I have been experimenting and hope to continue to build  my skills.

                                         

                                        Thanks again,

                                        Andrea

                                        • 20. Re: How To Align Divs to appear on different devices
                                          MurraySummers ACP/MVPs

                                          You are very welcome! Glad I could help...