4 Replies Latest reply: Sep 13, 2012 12:10 PM by David_Powers RSS

    Repositioning DIVs in a DW6 fluid grid layout

    eddieduggan Community Member

      I've followed James Williamson's video tutorial on fluid grid layouts http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/ and have created something similar.

       

      Williamson gives his DIVs fairly standard ID names. He starts with "header", ends with "footer" and places three DIVs in between:  "article", "interview" and "artwork" (around 6:20 in the video).

       

      The desktop layout is a standard three column layout with a header and footer while in the mobile layout all the divs stack up one on top of the other.

       

      In Williamson's tablet layout, he adjusts the width of the DIVs so two site below the header ("article" and "interview") and he makes the third ("artwork") span the full width (he shows the three layouts in a browser from 15.00  to 15.20 in the video).

       

      What I would like to do in the tablet layout is have the third column ("artwork") sits below "article" while the middle div, "interview" (which in my case is taller, due to having more content) sits to the right of them both.

       

      Is this possible using DW6's fluid layout grid, or would I have to create the layout manually from scratch?

        • 1. Re: Repositioning DIVs in a DW6 fluid grid layout
          Nancy O. CommunityMVP

          Offhand, I don't know.  I've never tried it.  With Fluid Grids, experimentation is the best way to gage what works and doesn't work.  I think I made 6 or 7 layouts the first time I worked with this feature because some of the things I tried failed miserably.

           

           

          Nancy O.

          • 2. Re: Repositioning DIVs in a DW6 fluid grid layout
            David_Powers CommunityMVP

            eddieduggan wrote:

             

            What I would like to do in the tablet layout is have the third column ("artwork") sits below "article" while the middle div, "interview" (which in my case is taller, due to having more content) sits to the right of them both.

             

            Is this possible using DW6's fluid layout grid, or would I have to create the layout manually from scratch?

             

            No. The way that Dreamweaver's Fluid Grid Layouts work is by floating all divs to the left. New rows are created by setting the clear property to left. As a result, you cannot have a div on the right that spans the height of multiple divs on the left.

             

            The divs must be displayed in rows in the same order as they appear in the underlying HTML. To get two divs on the left alongside a taller one on the right, you would need to wrap the left-hand divs in an outer div. The outer div can be snapped to the grid, but not the inner ones.

             

            As Nancy says, failing miserably with the Fluid Grid Layout feature is much easier than succeeding. It reminds me of Dreamweaver's earlier love affair with "layers" (absolutely positioned divs) -- well intentioned, but fatally flawed.

            • 3. Re: Repositioning DIVs in a DW6 fluid grid layout
              eddieduggan Community Member

              Ah, thanks both for the helpful (and fast!) replies.

               

              The new fluid grid layout thing looks great (and it seems to do what it does really well). It reminds me of the old Dreamweaver layout tables which, if I remember correctly, allowed bits of layout to be dragged around. I was a bit surprised when I couldn't just drag a layout div where I wanted it in the tablet view. Maybe that'll be possible in DW CS7.

              • 4. Re: Repositioning DIVs in a DW6 fluid grid layout
                David_Powers CommunityMVP

                eddieduggan wrote:

                 

                I was a bit surprised when I couldn't just drag a layout div where I wanted it in the tablet view. Maybe that'll be possible in DW CS7.

                I doubt it. The old layout tables in Dreamweaver created horrendous spaghetti code. The aim now is to create standards-compliant code. CSS just hasn't got the capability to support that type of drag-and-drop layout.

                 

                It might change a bit further down the line when browsers support the CSS3 Flexible Box Layout and Grid Layout modules. So far, Chrome is the only browser with support for the final flex syntax. It's going to be several years before you can use CSS3 flex and grid properties. And it's by no means certain that Adobe (or any other software manufacturer) will be able to devise a drag-and-drop layout tool that produces high quality code.