7 Replies Latest reply on Nov 21, 2014 3:15 PM by Nancy OShea

    Fluid layout wont float

    agothard

      Dear all, I know there will be a simple solution and i've read lots of tutorials but i cant find my mistake. Im using a fluid layout and trying to simply float two div tags next to eachother. Below is my code please help.

       

      HTML

      <body>

        <div class="gridContainer clearfix">

       

       

         <div class="fluid  container" id="one">This is the content for Layout Div Tag "one"</div>

            <div class="fluid  container" id="two">This is the content for Layout Div Tag "two"</div>

       

       

        </div>

      </body>

       

      CSS

      /* 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;

      }

      #one {

        background-color: #F8080C;

        width: 168px;

        float: left;

        height: 80px;

      }

      #two {

        background-color: #0250ED;

        width: 188px;

        float: left;

        height: 106px;

      }

      .zeroMargin_mobile {

      margin-left: 0;

      }

      .hide_mobile {

      display: none;

      }

       

      Thanks

        • 1. Re: Fluid layout wont float
          Nancy OShea Adobe Community Professional & MVP

          I can't image why you would a) float containers in mobile layouts and b) use pixels for width.

           

          Mobile layout would almost certainly be full screen width with floats occurring only in Tablet and Desktop where there is adequate viewport space to display them.  All widths would be expressed in %  not pixels to maintain the responsive flow.  Height is determined by content, not explicit values.

           

          Below is a Fluid Grid Layout example.

          Alt-Web :: Fluid Grid Test #4

           

           

          Nancy O.

          • 2. Re: Fluid layout wont float
            agothard Level 1

            Thanks Nancy,

             

            Your layout is great. I'll play around with it and try and use it to learn how to code it properly.

             

            I wasn't very clear in my first post. I was using %'s at first but just tried pixels because i couldn't make it work. Also I'm just playing with fluid layouts for the first time so wouldn't necessarily use them for the mobile layout. I just wanted to to figure out floating divs in a fluid layout style.

             

            Do you know what was wrong with my first attempt?

            • 3. Re: Fluid layout wont float
              agothard Level 1

              I've just inspected some of your code, is it to do with clearing the float?

               

              thanks again for your help.

              • 4. Re: Fluid layout wont float
                agothard Level 1

                I have fixed it, needed to use the clear property, that solves a few hours of frustration. I can also use your layout to help me style my own.

                 

                THANK YOU!

                • 5. Re: Fluid layout wont float
                  Nancy OShea Adobe Community Professional & MVP

                  Some advice.  Play away but it took me 9 re-tries to get an acceptable mobile/tablet/desktop layout  the first time I used this tool.   It's not exactly intuitive.

                   

                  Build mobile first. That's what everything else is based on.  Don't fuss with any content, just focus on getting divisions all inserted and stacked on top of each other.

                  Then build Tablet.  Use the pull handles to resize divs and move them up or down rows.

                  Finally build desktop.  If you examine the code as you go along, you'll see that DW does a pretty fair job of generating the necessary floats, widths and margins for you.  Don't tamper with Fluid Grid CSS code.  It's very temperamental and breaks easily.  When you're ready to style content, use a separate external stylesheet for that.

                   

                  Have fun!

                   

                  Nancy O.

                  1 person found this helpful
                  • 6. Re: Fluid layout wont float
                    agothard Level 1

                    Thanks i'll certainly follow that advice. I'm experimenting for now as im

                    not sure what i want it to look like yet.

                     

                    Last question, how have you set up your separate css sheets and attached

                    them appropriately?

                     

                    ta

                    • 7. Re: Fluid layout wont float
                      Nancy OShea Adobe Community Professional & MVP

                      DW generates the CSS code for mobile, tablet and desktop inside one external style sheet.  These are broken down into 3 sections: Mobile first, CSS media query for Tablets, CSS media query for Desktops.

                       

                      Boilerplate.css is more or less a Reset CSS.  Don't tamper with that either.

                       

                      Content.css file is one you create.  File > New > Blank page > CSS document.  Add some typography styles, backrounds, etc..  Just save it in the same place as your other 2 style sheets.

                       

                      From the files panel, you can drag that file into the <head> of your layout.html page.  DW will create the link code for you.

                       

                       

                      Nancy O.

                      1 person found this helpful