layout and fluid grid div tags

so now, I start my journey of learning the layout feature fluid grid dw6.  just started and have already fallen on a problem. When to create a div, I prefer to give them a width and height seems just to help put on the page, but in fgl when I put the value for these it just seem to ignore it, is this true?  If so, how does this work?

Hello

The idea of using a fluid grid presentation is that the size of the div elements will adjust themselves based on the width different screen sizes.

It is difficult to say without seeing your design/layout that you work to say whether or not you should actually try to set the fixed width and height for your div elements fixed width setting is fine if you are designing a traditional presentation, fixed width, it can help you to read this article on the differences between fixed vs fluid layouts http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-r ight-one-for-you /

Since you mention that you are just starting to work with fluid grid, maybe check out Adobe TV can help you get started...

Alassane http://TV.adobe.com/watch/Learn-Dreamweaver-CC/Create-Fluid-Responsive-Web-pages-in-dreamw.

Good luck!

Tags: Dreamweaver

Similar Questions

  • CSS, div and the AP div tags.

    Hi guys, I am building a Web page using a trial version of dreamweaver and I have a few problems with the formatting and CSS.

    I'm trying to build a gallery of thumbnails and managed to pretend grand in design mode, by using the 'class' selector (sorry for my terminology if it is false), by placing the thumbnails in an AP div and using the field "box" to set appropriate margins.

    But when the preview in internet explore, the images appear up against the div 'container', I said, even if that puts them outside the ap Div they are contained in.

    I found a 'solution' - to position elements in design mode so that they display correctly in internet explorer, even if it meant that the left most miniature has a border of 100 instead of 50.

    But to complicate things more, this Setup program incorrectly displayed in Safari and Firefox. (The images appear on the far right, but at least identical in both programs).

    I also tried to use regular divs and no divs, with similar problems. In fact, often the elements (including text) position I do not appear as they should.

    Can someone tell me what is happening and how to fix?

    Thanks in advance.

    Ben_McPhee wrote:
    > Hi guys, I am building a Web page using a trial version of dreamweaver and am
    > some problems with formatting and CSS.
    >
    > I am trying to build a gallery of thumbnails and managed to get it look great
    > in design mode, by using the 'class' (sorry for my terminology if selector
    (> Is false), by placing the thumbnails in an AP div and using the 'box '.
    > fields to set the appropriate margins.
    >
    > But when you preview in internet explorer, the images appear to the top against the
    > div 'container', I said, even if that puts them outside the ap Div
    > they are contained in.
    >
    > I found a 'solution' - to position the elements in design mode for that
    > they display correctly in internet explorer, even if it meant that the
    > more miniature left has a border of 100 instead of 50.
    >
    > But to complicate things more, this Setup program incorrectly displays in both
    > Safari and Firefox. (The images appear on the far right, but at least identical in the two
    (> programs).
    >
    > I also tried to use regular divs and no divs, with similar problems. In
    > fact, often of the elements (including text) position I do not appear as they should.
    >
    > Can someone tell me what is happening and how to fix?
    >
    > Thanks in advance.
    >

    I replied to your post of corss "vignettes of positioning" and suggested that you use a table to do this, since
    a table is the best and easiest to create a grid, which is what you want.
    If you don't want to use a table, learn CSS and use AP div tags.
    Divs are not a viable solution for your problem and are almost never a good idea, although they
    are often used by beginners because PA divs can be moved and positioned where you want
    the design view. Ease of use is an illusion and creates unexpected problems you encounter.

    --
    SEB (@webtrans1.com)

    high-end web design: http://webtrans1.com

    Music: http://myspace.com/popmodelberlin

  • Dreamweaver CC fluid grid divs do not stretch to cover 100% of the screen

    Hello

    I do another sensible provision using DW CC and I came across a problem.

    Design colored divs that spans the entire page to 100% with a background color and borders.

    I already did the design upwards as a layout width fixed to get the color codes etc. and that works well, with colors that covers the screen.

    Now, I'm putiing design in DW CC using checkerboard to fluid and there is a white border on the Web site.

    I can't work on how to get rid of this. Here are excerpts from my two lots of CSS stylesheets, one for a presentation grid fixed and one for a structure reactive

    CSS FIXED WIDTH

    body, td, th {}

    do-family: Calibri;

    do-size: 14px;

    Color: #000;

    }

    {body

    left margin: 0px;

    margin-top: 0px;

    margin-right: 0px;

    margin-bottom: 0px;

    }

    * / The wrapper header spans the entire screen no matter what size and does not have a white border on the left and the right

    {#headerWrapper}

    background-color: #000;

    height: 101px;

    Width: 100%;

    margin-right: auto;

    left margin: auto;

    border-bottom-width: 2px;

    border-bottom-style: solid;

    border-bottom-color: #BDDB6D;

    }

    FLUID GRID CSS

    The fluid layout grid CSS has the following in it:

    {.fluid}

    Clear: both;

    left margin: 0;

    Width: 100%;

    float: left;

    display: block;

    }

    {.fluidList}

    list-style: none;

    list-style-image: none;

    margin: 0;

    padding: 0;

    }

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

    {.gridContainer}

    left margin: auto;

    margin-right: auto;

    Width: 86,45%;

    padding-left: 2,275%;

    padding-right: 2,275%;

    Clear: none;

    float: none;

    }

    {#div1}

    }

    * / This header wrapper extends through the presentation of the grid only and has a white border on the left and the right

    {#headerWrapper}

    Max-width: 100%;

    height: 101px;

    background-color: #000;

    border-bottom-width: 2px;

    border-bottom-style: solid;

    border-bottom-color: #BDDB6D;

    }

    What do I need add to the fluid grid layout to make the headerWrapper div span the screen, no matter what width?

    What should I put in the grid CSS transmissions so that he can do that?

    Thanks in advance!

    I did it! I can't believe. The code I used is followed. The bar divs set color and at the border through the entire page and the wrapper divs to contain content in the various bars across the page.

    I must say that DW CC fluid grids are much more stable to work with and it can take a lot of coding by hand now. This is a great improvement on when I tried to use grids of fluid on a project last year.

    IN THE SECTION MULTIMEDIA PHONE REQUEST

    {.gridContainer}

    left margin: auto;

    margin-right: auto;

    Width: 100%;

    padding-left: 0;

    padding-right: 0;

    Clear: none;

    float: none;

    }

    {#headerBar}

    background-color: #000;

    min-height: 101px;

    border-bottom-width: 2px;

    border-bottom-style: solid;

    border-bottom-color: #BDDB6D;

    padding-top: 2.735px;

    }

    {#headerWrapper}

    Width: 86,45%;

    padding-left: 2,275%;

    padding-right: 2,275%;

    Clear: none;

    float: none;

    left margin: auto;

    }

    {#menuAnimationBar}

    background-color: #B7B7B7;

    height: 293px;

    border-bottom-width: 2px;

    border-bottom-style: solid;

    border-bottom-color: #BDDB6D;

    background-image:-webkit-gradient (linear, 50.00% 0.00%, 50.00% 100.00%, color-stop (0%, rgba (153,153,153,1.00)), color-stop (100%, rgba (192,192,192,1.00)));

    background-image:-webkit-linear-gradient(270deg,rgba(153,153,153,1.00) 0%,rgba(192,192,192,1.00) 100%);

    background-image: linear-gradient (180deg, rgba (153,153,153,1.00) 0%,rgba(192,192,192,1.00) 100%);

    display: none;

    }

    {#contentBar}

    background-color: #F8FCF1;

    min-height: 200px;

    background-image:-webkit-gradient (linear, 50.00% 0.00%, 50.00% 100.00%, color-stop (0%, rgba (245,251,234,1.00)), color-stop (100%, rgba (251,253,247,1.00)));

    background-image:-webkit-linear-gradient(270deg,rgba(245,251,234,1.00) 0%,rgba(251,253,247,1.00) 100%);

    background-image: linear-gradient (180deg, rgba (245,251,234,1.00) 0%,rgba(251,253,247,1.00) 100%);

    }

    {#contentWrapper}

    Width: 86,45%;

    padding-left: 2,275%;

    padding-right: 2,275%;

    Clear: none;

    float: none;

    left margin: auto;

    }

    {#socialMediaBar}

    background-color: #000;

    min-height: 83px;

    border-top-width: 2px;

    border-bottom-width: 2px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #BDDB6D;

    border-bottom-color: #BDDB6D;

    }

    {#socialMediaWrapper}

    color: #FFF;

    Width: 86,45%;

    padding-left: 2,275%;

    padding-right: 2,275%;

    Clear: none;

    float: none;

    left margin: auto;

    padding-top: 2,275%;

    }

    {#footerBar}

    color: #FFF;

    background-color: #AAAAAA;

    min-height: 176px;

    background-image:-webkit-gradient (linear, 50.00% 0.00%, 50.00% 100.00%, color-stop (0%, rgba (153,153,153,1.00)), color-stop (100%, rgba (185,185,185,1.00)));

    background-image:-webkit-linear-gradient(270deg,rgba(153,153,153,1.00) 0%,rgba(185,185,185,1.00) 100%);

    background-image: linear-gradient (180deg, rgba (153,153,153,1.00) 0%,rgba(185,185,185,1.00) 100%);

    }

    {#footerWrapper}

    Width: 86,45%;

    padding-left: 2,275%;

    padding-right: 2,275%;

    Clear: none;

    float: none;

    left margin: auto;

    }

    IN THE MULTIMEDIA TABLET QUERY SECTION

    {.gridContainer}

    Width: 100%;

    padding-left: 0%;

    padding-right: 0%;

    Clear: none;

    float: none;

    left margin: auto;

    }

    {#div1}

    }

    {#headerBar}

    }

    {#headerWrapper}

    Width: 90.675%;

    padding-left: 1.1625%;

    padding-right: 1.1625%;

    Clear: none;

    float: none;

    left margin: auto;

    }

    {#menuAnimationBar}

    display: none;

    }

    {#contentBar}

    }

    {#contentWrapper}

    Width: 90.675%;

    padding-left: 1.1625%;

    padding-right: 1.1625%;

    Clear: none;

    float: none;

    left margin: auto;

    }

    {#socialMediaBar}

    }

    {#socialMediaWrapper}

    Width: 90.675%;

    padding-left: 1.1625%;

    padding-right: 1.1625%;

    Clear: none;

    float: none;

    left margin: auto;

    }

    {#footerBar}

    }

    {#footerWrapper}

    Width: 90.675%;

    padding-left: 1.1625%;

    padding-right: 1.1625%;

    Clear: none;

    float: none;

    left margin: auto;

    }

    {#menuAnimationWrapper}

    }

    IN THE PC MEDIA QUERY SECTION

    {.gridContainer}

    Width: 100%;

    Max-width: 1920px;

    padding-left: 0%;

    padding-right: 0%;

    margin: auto;

    Clear: none;

    float: none;

    left margin: auto;

    }

    {#headerBar}

    }

    {#headerWrapper}

    Width: 88.5%;

    Max-width: 1232px;

    padding-left: 0.75%;

    padding-right: 0.75%;

    margin: auto;

    Clear: none;

    float: none;

    left margin: auto;

    }

    {#menuAnimationBar}

    display: block;

    }

    {#contentBar}

    }

    {#contentWrapper}

    Width: 88.5%;

    Max-width: 1232px;

    padding-left: 0.75%;

    padding-right: 0.75%;

    margin: auto;

    Clear: none;

    float: none;

    left margin: auto;

    }

    {#socialMediaBar}

    }

    {#socialMediaWrapper}

    Width: 88.5%;

    Max-width: 1232px;

    padding-left: 0.75%;

    padding-right: 0.75%;

    margin: auto;

    Clear: none;

    float: none;

    left margin: auto;

    }

    {#footerBar}

    }

    {#footerWrapper}

    Width: 88.5%;

    Max-width: 1232px;

    padding-left: 0.75%;

    padding-right: 0.75%;

    margin: auto;

    Clear: none;

    float: none;

    left margin: auto;

    }

    {#menuAnimationWrapper}

    Width: 88.5%;

    height: 293px;

    Max-width: 1232px;

    padding-left: 0.75%;

    padding-right: 0.75%;

    margin: auto;

    Clear: none;

    float: none;

    left margin: auto;

    }

  • Layers and fluid grid

    Hi all

    I work with CS6 grid fluid html5. I have an animation that makes a loop and the urge to put a button above. When I use the option to draw for Div and insert a button of turning inside it does not move with the page when it is resized.  She also will be displayed in different browsers with a slightly different position. Using absolute positioning? Any input is greatly appreciated.

    Thank you

    Dan

    APDivs or layers are removed from the normal flow of documents and will be positioned compared to the upper left of the browser window or the nearest relatively positioned parent container.  Because the fluid grids do not contain a relatively positioned parent container, you will need to create one for your button.

    {#holder}

    position: relative;

    top: xxxpx;

    left: xxxpx;

    z-index: 1;

    }

    {#button}

    position: absolute;

    top: xxx px;

    left: xxx px;

    z-index: 10;

    }

    HTML:

    your button here

    Nancy O.

  • Responsive Design - Show and hide the div tags

    Hello

    I am building a website using sensitive design. I want a certain div tag to be read on a desktop and a tablet but then to disappear and a different div be made visible on the mobile device.

    I realized the above with the code below, but I found a problem. The problem I found is that the div is hidden here still an empty space remains there then it creates a large empty space. Anyway is to hide this great space?

    (mobile)

    {#tab-container}

    display: none;

    visibility: hidden;

    Clear: both;

    float: none;

    left margin: 0;

    Width: 96%;

    display: block;

    margin-right: auto;

    left margin: auto;

    padding-top: 10px;

    padding-bottom: 10px;

    text-align: center;

    border-top-width: 1px;

    border-bottom-width: 1px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #000;

    border-bottom-color: #000;

    }

    {#phone-tabs}

    display: block;

    visibility: visible;

    Clear: both;

    float: none;

    left margin: 0;

    Width: 96%;

    display: block;

    margin-right: auto;

    left margin: auto;

    padding-top: 10px;

    padding-bottom: 10px;

    text-align: center;

    border-top-width: 1px;

    border-bottom-width: 1px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #000;

    border-bottom-color: #000;

    line-height: 30px;

    }

    (Tablet)

    {#tab-container}

    display: block;

    visibility: visible;

    Clear: both;

    float: none;

    left margin: 0;

    Width: 96%;

    display: block;

    margin-right: auto;

    left margin: auto;

    padding-top: 10px;

    padding-bottom: 10px;

    text-align: center;

    border-top-width: 1px;

    border-bottom-width: 1px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #000;

    border-bottom-color: #000;

    }

    {#phone-tabs}

    display: none;

    visibility: hidden;

    Clear: both;

    float: none;

    left margin: 0;

    Width: 96%;

    display: block;

    margin-right: auto;

    left margin: auto;

    padding-top: 10px;

    padding-bottom: 10px;

    text-align: center;

    border-top-width: 1px;

    border-bottom-width: 1px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #000;

    border-bottom-color: #000;

    }

    (office)

    {#tab-container}

    display: block;

    visibility: visible;

    Clear: both;

    float: none;

    left margin: 0;

    Width: 70%;

    display: block;

    margin-right: auto;

    left margin: auto;

    padding-top: 10px;

    padding-bottom: 10px;

    text-align: center;

    border-top-width: 1px;

    border-bottom-width: 1px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #000;

    border-bottom-color: #000;

    }

    {#phone-tabs}

    display: none;

    visibility: hidden;

    Clear: both;

    float: none;

    left margin: 0;

    Width: 70%;

    display: block;

    margin-right: auto;

    left margin: auto;

    padding-top: 0px;

    padding-bottom: 0px;

    text-align: center;

    border-top-width: 0px;

    border-bottom-width: 0px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #000;

    border-bottom-color: #000;

    }

    Thanks for your help!

    Alex

    Try to delete the two lines, as shown below.

    Display: block overrides display: no because it is further down in the code.

    For this reason, visibility: hidden comes into play. This statement is exactly intended to hide the contents, while leaving the blank space.

    Edit: I think that really is all you need:

    {#tab-container}

    display: none;

    }

    (mobile)

    {#tab-container}

    display: none;

    visibility: hidden;

    Clear: both;

    float: none;

    left margin: 0;

    Width: 96%;

    display: block;

    margin-right: auto;

    left margin: auto;

    padding-top: 10px;

    padding-bottom: 10px;

    text-align: center;

    border-top-width: 1px;

    border-bottom-width: 1px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #000;

    border-bottom-color: #000;

  • My fluid grid divs are slightly to the right and not centered

    I use CS6 and grids of fluid to make my mobile friendly Web site. The problem I have is that, for some reason, some of my divs (the ones I check to start on a new line) are off-center and appear to be too far to the right. But the one I unchecked to start on a new line so that it snaps up next to the one above when displayed on a shelf or desktop version is perfectly centered. I've looked everywhere and I can't find why it's happening. Here is a screenshot of the problem. You will see the second image with (about Writeaholics div), is centered. If anyone knows what's the problem and has a solution I would be eternally grateful. Thank you.

    Screen Shot 2015-04-28 at 8.57.49 am.pngScreen Shot 2015-04-28 at 9.12.09 am.png

    I removed the padding and everything is fine

    #header {}

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    background-color: #ffdf80;

    / * padding-left: 5px; * /

    / * right padding: 5px; * /

    margin: 0 auto;

    }

  • Divs in fluid grid div suddenly not left-align, right-most on each line travel down again

    Hey everyone, I need help! Last night my site worked perfectly well, and somewhere along the way, I made a change so that I can 't understand. There are all the divs on my site, the first two of the three are always aligned horizontally, but the third and last div is pushed back down again once. What baffles me the most, is that it is somehow changed on every page of my site, not just one, I'm working on. Could someone tell what could have caused it? As well, it seems still exactly how I want it to look mode live view, but as soon as I load in a browser, it is inconsistent, and I tried it in all major browsers with the same result. The body of the pages seems to be fine, it's only the divs that are crazy. I'm sure it's to have something to do with changing margins, but I don't know what part needs to be changed or what to put too exactly.

    King Karl wrote:

    What baffles me the most, is that it is somehow changed on every page of my site, not just one, I'm working on.

    Karl, this is expected behavior when you use a remote CSS style sheet that is linked to all of your HTML pages. While you can have your attention on an HTML page, any changes you make to the CSS will apply immediately to all pages using this CSS stylesheet.

    In rare cases where you want to apply a PAGE only FOR ONE single CSS rule, Insert rule in a style block in the head section of this page only, or you can even use a style inline on the unique element.

  • How to have more than one alignment inside the div fluid grid?

    My fluid grid div tag is defined for alignment to the left, but I want to center the last sentence. How?

    Sure.  Use a CSS class.

    . Center {text-align: center}

    HTML

    class = "center"> This is a centered paragraph.

    Nancy O.

  • How to make a video background to a fluid grid presentation in DW CS6?

    I have the full video backgrounds successfully placed in an ordinary web page, but cannot get a video to run as a complete history on a checkerboard to fluid. I searched this forum and the web without success.

    Anyone have any suggestions for a source for this app?

    Thanks in advance, Rich

    First read this:

    Can I use a video as a background? CSS-Tricks

    I don't advocate using the layouts of fluid grid (inheritance).  Support this feature faded when DW introduced Bootstrap for 2015 of CC.   FGLs won't be much longer. 

    Bootstrap has some very practical classes to make suitable videos that take their proportions in reagents layouts.

    ALT-Web Design & Publishing: reactive Bootstrap 3 Videos

    However, FGLs do not have this support.  If you yourself your own workaround solutions.

    Background videos have a price.

    • Too much bandwidth for mobile users.
    • AutoPlay is ignored by most mobile devices.
    • When it is used as a backdrop, the customary HTML5 video controls are not accessible.

    Nancy O.

  • Can you add a video to a fluid grid project in CS6

    Hi again;

    I think of the CS6 upgrade to help with my video problem in CS 5.5 and I was wondering if you can add video to a web project of fluid grid.  Of that I looked on the web, it seems that everything is a web site to a page with links to an area on the index page.  I need to get the video into my site as examples of what I'm doing and the fluid grid is superb.  I also suspect that I could put a link to a site of videos like Vimeo.

    Thanks for your help.

    Tom

    wondering if you can add video to a web project of fluid grid.

    Sure.  You can drop your own HTML5 videos or embed Vimeo, YouTube, etc...

    Of that I looked on the web, it seems that everything is a web site to a page with links to an area on the index page.

    Not true.  jQuery Mobile and fluid grid Layouts differ a little, not to get confused.

    JQuery Mobile is essentially a website a page for mobile devices.

    With fluid grid Layouts however, you can make a layout of reagent website in a few minutes, then save as template.  Use file > new template page to create the rest of your site pages. Or, you can use the jQuery tab panels inside the fluid grid layouts.  It is entirely up to you.

    Nancy O.

  • Problem with the AP div tags... Help, please!

    I am very new to web design, and I learn a LOT here!

    So I created a Web site and did the layout with the AP div tags, not knowing exactly what they were, but at the point where they seem to give me the results I wanted...

    Now after all download and realize that it does not the way I expected, and did some research more than I understand they are the divs "absolute positioning", which is why most of my images and text don't stay centered with the main box when I view the page in a browser.

    Rather than repeat everything, I found this another option during a search: wrapping all AP divs in another that has the right properties (related lines of position and auto). I tried on a test page and it worked, but I tried exactly the same with one of my models and it does not work.

    Basically, I added a < div id = 'name here' > just below the < body > tag

    and then a < / div > just above of the < / body > tag

    then he gave a new style CSS (position: relative and margin: auto)

    Is someone can you please tell me why it does not work on my models? Or if you have a better solution to ensure that everything remains focused on my pages, I am totally open.

    (Please keep in mind, I know very little coding)

    Is my website: http://blissfullyeverafter.org/

    Thanks in advance!

    Basically, I added a

    just below of thetag

    and then a

    just above the tag

    then he gave a new style CSS (position: relative and margin: auto)

    A div tag is a block tag.  Tags block fill the width of their container.  Without attributing this div a width explicitly, it will extend from the left margin of the viewport to the right margin.  You can't focus such a tag!   The solution is to assign it a width.  Then the car to the left and right margins will kick in and cause its Center as you wish.

  • Tables, div tags, or both

    I think I asked this question a long time ago but I now move to finalize my website and I don't know if a table in a div is a good idea.

    I have a div wrapper, header, navigation, mainbody and footer. All are in my template and the editable area only is the mainbody.

    I could place a right div, div left and eventually a div Center and have several div tags in these 3 major divs.

    Or I could use tables on some of my pages, I use photographs (of kitchens).

    I think I have about 9 small thumbnail images on the left side of the page and each would change a larger image to the right of the page.
    I think that when I do the math, a table can be better even if it's among the divs.

    I am causing future pain or is it the right way around it.

    Thank you for taking the time to read my short story and I hope you can help me.

    concerning

    Michael

    So overall you DESIGN your page layout in FW or PS, slice on the optimized graphic elements that appear on the page and then build the page in DW adding some interactivity, you need on the page when you create the HTML code.  This interactivity could lead to jQuery, or one of the many commercial/non commercial extensions already mentioned.

    It is not suitable for any production work, all circumstances, allow your graphic application write HTML of your page.

  • Dreamweaver. Is it possible to have AP div tags in a fluid Grid Layout Div?

    I am putting together a site with a very basic page layout; some titles at the top, each placed in an AP Div, with images below.  But I would use the fluid Grid Layout Div so that the positioning of the change of flags AP div on mobile devices.

    I can't figure out how to do so that the AP div inside my fluid Grid Layout Divs tags

    Thank you

    1. forget the AP Div they are of very little use and can only be deployed in a sensitive site with care (and knowledge).

    2 forget the fluid grid layouts, they are not sufficiently stable.

    That being said, take a look at create a responsive Web design in Dreamweaver | Adobe Dreamweaver tutorials CC and Bootstrap 3 tutorial

  • Green highlight when you use fluid Grid Layout Div tags

    That the Green highlight means when working in Live view of a checkerboard mode fluid using fluid Grid Layout Div tags? Sometimes they appear, but sometimes they did not. I think it has something to do with the width setting but I can't understand what is the rule, or which indicates the high point.

    Dreamweaver CS6

    Mac OSX 10.8.2

    Thank you!!

    Brian McNay wrote:

    the Green highlight sometimes disappears when you change the width property of the div. My question is what this means?

    If you change the width of a div manually in Code view or in the Panel styles CSS, Dreamweaver continues to treat it as a fluid grid layout div, and green highlighting disappears.

    To be considered a div of fluid grid layout, the width should be adjusted by dragging the handles in Design view. Dreamweaver snaps divs fluid layout grid to the grid on which is defined when you create the page, and it calculates the width and margin the number of decimals. If the width or margin does not match the dimension of the grid, the highlighting disappears, and the div is treated as any other div.

    It is not a bug, nor is the divs to layout fluid grid different from normal ones. The idea of the grid and the highlight is to allow you to create a layout adapted to a hypothetical grid. Once you have created the basic structure, it is best to disable the Visual guides in any case.

    Personally, I think that the implementation of fluid layouts grid in Dreamweaver CS6 leaves much to be desired. The basic idea is good, but it is difficult to use if you don't have a solid knowledge of CSS.

  • Why I'm not able to see the fluid Grid Layout Div tag

    Why can't I see no menu fluid Grid Layout Div in the Layout to insert tags

    DW CC changed signs.  If you work in FGLayouts, DW intuitively inserts the correct Div for you.

    Nancy O.

Maybe you are looking for