6 Replies Latest reply: May 18, 2012 10:25 AM by btvbillb RSS

    3 columns in fluid grid issue

    btvbillb

      I followed a video tutorial that shows how to create 3 columns. You are instructed to create a div as a new row and then add two more divs to that row and then drag the divs to a value of 4 each. The next div row to be created would be for a footer, etc. When viewed on a desktop all of this looks fine. The issue is that when resized down to mobile size, column 2 and 3 are indented over a bit (see below). I have tried creating three divs (each in their own row) with a span of 4 each but they won't all float together in one row. Any solutions for this? Thanks.

       

      Desktop

      Capture.JPG

       

      Mobile

      Capture.JPG

        • 1. Re: 3 columns in fluid grid issue
          Nancy O. MVP

          It's hard to say without seeing your code. But I'll hazard a wild guess that your mobile CSS needs that section to have

          float:none;

          padding:0;

          margin:0.

          display:block;

           

           

           

          Nancy O.

          • 2. Re: 3 columns in fluid grid issue
            btvbillb Community Member

            I gave it a try but no luck. Here's the code:

             

            /* Mobile Layout: 480px and below. */

             

            .gridContainer {

                margin-left: auto;

                margin-right: auto;

                width: 88.626%;

                padding-left: 1.1869%;

                padding-right: 1.1869%;

            }

            #LayoutDiv1 {

                clear: both;

                float: left;

                margin-left: 0;

                width: 100%;

                display: block;

            }

            #LayoutDiv2 {

                clear: both;

                float: none;

                margin-left: 0;

                width: 100%;

                display: block;

            }

            #LayoutDiv3 {

                clear: none;

                float: none;

                margin-left: 0;

                width: 100%;

                display: block;

            }

            #LayoutDiv4 {

                clear: none;

                float: none;

                margin-left: 0;

                width: 100%;

                display: block;

            }

            #LayoutDiv5 {

                clear: both;

                float: left;

                margin-left: 0;

                width: 100%;

                display: block;

            }

            • 3. Re: 3 columns in fluid grid issue
              Nancy O. MVP

              That's not enough to go on.  CSS cascades.  We would need to see the Desktop, Tablet and Mobile CSS code as well as your HTML

               

               

              Nancy O.

              • 4. Re: 3 columns in fluid grid issue
                btvbillb Community Member

                Thanks. Here is the HTML:

                 

                <!doctype html>

                <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->

                <!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->

                <!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->

                <!--[if gt IE 8]><!-->

                <html class="">

                <!--<![endif]-->

                <head>

                <meta charset="utf-8">

                <meta name="viewport" content="width=device-width, initial-scale=1">

                <title>Untitled Document</title>

                <link href="boilerplate.css" rel="stylesheet" type="text/css">

                <link href="Untitled-1.css" rel="stylesheet" type="text/css">

                <!--

                To learn more about the conditional comments around the html tags at the top of the file:

                paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

                 

                Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):

                * insert the link to your js here

                * remove the link below to the html5shiv

                * add the "no-js" class to the html tags at the top

                * you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build

                -->

                <!--[if lt IE 9]>

                <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>

                <![endif]-->

                <script src="respond.min.js"></script>

                </head>

                <body>

                <div class="gridContainer clearfix">

                  <div id="LayoutDiv1">

                    <h1>Header</h1>

                  </div>

                  <div id="LayoutDiv2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas   tristique volutpat ante vitae volutpat. Sed posuere tincidunt lacus vel   dictum. Mauris aliquam ligula id nulla ultricies volutpat. Nulla   facilisi. Sed at elit ac tellus bibendum accumsan. Vivamus id nisi   dignissim neque congue euismod non ac ante. </div>

                  <div id="LayoutDiv3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas   tristique volutpat ante vitae volutpat. Sed posuere tincidunt lacus vel   dictum. Mauris aliquam ligula id nulla ultricies volutpat. Nulla   facilisi. Sed at elit ac tellus bibendum accumsan. Vivamus id nisi   dignissim neque congue euismod non ac ante. </div>

                  <div id="LayoutDiv4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas   tristique volutpat ante vitae volutpat. Sed posuere tincidunt lacus vel   dictum. Mauris aliquam ligula id nulla ultricies volutpat. Nulla   facilisi. Sed at elit ac tellus bibendum accumsan. Vivamus id nisi   dignissim neque congue euismod non ac ante. </div>

                  <div id="LayoutDiv5">

                    <h2>Footer</h2>

                  </div>

                </div>

                </body>

                </html>

                 

                and 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/

                */

                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:        5;

                    dw-num-cols-tablet:        8;

                    dw-num-cols-desktop:    12;

                    dw-gutter-percentage:    15;

                   

                    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/

                */

                 

                /* Mobile Layout: 480px and below. */

                 

                .gridContainer {

                    margin-left: auto;

                    margin-right: auto;

                    width: 88.626%;

                    padding-left: 1.1869%;

                    padding-right: 1.1869%;

                }

                #LayoutDiv1 {

                    clear: both;

                    float: left;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                }

                #LayoutDiv2 {

                    clear: both;

                    float: none;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                }

                #LayoutDiv3 {

                    clear: none;

                    float: none;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                }

                #LayoutDiv4 {

                    clear: none;

                    float: none;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                }

                #LayoutDiv5 {

                    clear: both;

                    float: left;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                }

                 

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

                 

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

                .gridContainer {

                    width: 91.4836%;

                    padding-left: 0.7581%;

                    padding-right: 0.7581%;

                }

                #LayoutDiv1 {

                    clear: both;

                    float: left;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                }

                #LayoutDiv2 {

                    clear: both;

                    float: left;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                }

                #LayoutDiv3 {

                    clear: none;

                    float: left;

                    margin-left: 1.6574%;

                    width: 100%;

                    display: block;

                }

                #LayoutDiv4 {

                    clear: none;

                    float: left;

                    margin-left: 1.6574%;

                    width: 100%;

                    display: block;

                }

                #LayoutDiv5 {

                    clear: both;

                    float: left;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                }

                }

                 

                /* 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: 89.0217%;

                    max-width: 1232px;

                    padding-left: 0.4891%;

                    padding-right: 0.4891%;

                    margin: auto;

                }

                #LayoutDiv1 {

                    clear: both;

                    float: left;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                }

                #LayoutDiv2 {

                    clear: both;

                    float: left;

                    margin-left: 0;

                    width: 32.6007%;

                    display: block;

                }

                #LayoutDiv3 {

                    clear: none;

                    float: left;

                    margin-left: 1.0989%;

                    width: 32.6007%;

                    display: block;

                }

                #LayoutDiv4 {

                    clear: none;

                    float: left;

                    margin-left: 1.0989%;

                    width: 32.6007%;

                    display: block;

                }

                #LayoutDiv5 {

                    clear: both;

                    float: left;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                }

                }

                • 5. Re: 3 columns in fluid grid issue
                  osgood_ MVP

                  You've still got left marigins on the below <divs> once you go to a one column layout, that is causing the indent.

                   

                   

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

                   

                  #LayoutDiv3 {

                      clear: none;

                      float: left;

                      margin-left: 1.0989%;

                      width: 32.6007%;

                      display: block;

                  }

                  #LayoutDiv4 {

                      clear: none;

                      float: left;

                      margin-left: 1.0989%;

                      width: 32.6007%;

                      display: block;

                  }

                   

                   

                  You might want to look at this tutorial its better in my opinion than what you are following:

                   

                  http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

                   

                  Alistapart (if that's where you are learning from) are a bit up their own backsides in my opinion and don't really cater for beginners.

                  • 6. Re: 3 columns in fluid grid issue
                    btvbillb Community Member

                    That was it. Problem solved. Thank you very much!