4 Replies Latest reply on Feb 27, 2013 5:41 AM by FG Expert

    Fluid Grid Div Tags

    brex2040 Level 1

      I have a project that i am working on. I have setup my header, menu, left, content, and right fluid grid div tags.

       

      Example

       

           <div id="header">This is the content for Layout Div Tag "header"</div>

           <div id="menu">blah blah blah</div>

           <div id="middleContent">This is the content for Layout Div Tag "middleContent"</div>

           <div id="leftBar">This is the content for Layout Div Tag "leftBar"</div>

           <div id="rightBar">This is the content for Layout Div Tag "rightBar"</div>

           <div id="footer">This is the content for Layout Div Tag "footer"</div>

       

      i like this for mobile and tablet layout, but for desktop i would like it to be like this.

       

           <div id="header">This is the content for Layout Div Tag "header"</div>

           <div id="menu">blah blah blah</div>

           <div id="leftBar">This is the content for Layout Div Tag "leftBar"</div>

           <div id="middleContent">This is the content for Layout Div Tag "middleContent"</div>

           <div id="rightBar">This is the content for Layout Div Tag "rightBar"</div>

           <div id="footer">This is the content for Layout Div Tag "footer"</div>

       

      So this is the way i would like it, but when you change it, it changes it for all the layouts. Anyway to make it like the example with out it changing the other 2 layouts?

       

      Byron

        • 1. Re: Fluid Grid Div Tags
          Riccardo Moschetti Level 1

          Hi Byron,

          The difference I can see in your code samples is that in the "mobile" version you have "middle content" after "left bar", contrary to the "desktop" version, where you have "left bar" before "middle content". Is that correct?

           

          Let me start to say that the way the "div"s are presented in the HTML code does not mean much: it is the CSS which decides how the content is placed on the screen (with some limitations).

           

          However, with the fluid grid layout, you can have different CSS styles for mobile / tablet / desktop, not different HTML.

           

          That is why you have to have equal HTML and different CSS, keeping in mind that desktop CSS is inherited from tablet (unless where differently specified) and tablet inherits from mobile.

           

          If I were you, I would do like this:

           

          <div id="left for desktop">

          <div id="middle">

          <div id="left for mobile">same content as "left"

          <div id="right">

           

          Then, in the CSS, I would make "left for mobile" not visible for desktop (with display:none).

          I would make "left for desktop" not visible for mobile.

           

          Hope this helps!

          • 2. Re: Fluid Grid Div Tags
            Nancy OShea Adobe Community Professional & MVP

            But wouldn't that duplicate "left" content? 

            Google doesn't like duplicate content.

             

            Nancy O.

            • 3. Re: Fluid Grid Div Tags
              Riccardo Moschetti Level 1

              The Dreamweaver Fenruary update might be of help in this case (have not tested it yet, though)

               

              (12.2 update) When you select an inserted element, the options to hide, duplicate, lock, or delete the Div are displayed. For Divs layered on top of each other, the option to swap Divs is displayed.

              • 4. Re: Fluid Grid Div Tags
                FG Expert Level 1

                'Box-ordinal-group' property can be used to achieve the same.