DW version 12.2 Build 6006 fluid grids

There is no Fluid Grid DIV item from the INSERT/LAYOUT drop down menu in DW 12.2. I have to select DIV and then give it fluid container properties. Any modifications have to be done through the CSS properties panel since there are no DIV handles. My App Manager says this is the latest update. Any ideas?

I've just tested it in Dreamweaver CS6 (Version 12.2, build 6006). Although there is no option for Fluid Grid Layout Div Tag, just clicking Div produces the correct dialog box for a fluid grid div when you're working with a Fluid Grid Layout:
Clicking Div in an ordinary HTML page produces a different dialog box like this:
This brings CS6 more into line with the way Dreamweaver CC works. In CC, the Layout category of the Insert panel is context sensitive. When working with a Fluid Grid Layout, you're no longer limited to divs. All layout elements can be inserted as fluid elements. Try it with Header, Navigation, etc.

Similar Messages

Fluid Grid Layout with Sidebar

I am fairly new to dreamweaver and trying to build a fluid grid layout with a sidebar which needs to span the full height of the website and I am having trouble. I cant get the sidebar to span multiple columns using the fluid grids. I know I can do it with pure css using display options but wanted to know if. Can do it visually using dreamweaver's built in tools and UI.
Can someone point out if I am going about this correctly? I can provide more info if needed.
Thanks.

I started using FGL when first introduced. In the meantime they have improved quite a bit, but I was so taken aback that I decided not to go down that path again.
I have used Foundation and am now using Bootstrap. Although I would prefer to use the former as I think that it is better, the general trend is towards Bootstrap.
You can start with the free of charge Bootstrap extension.

Fluid grid layout guides and elements are suddenly gone

I’m working in Dreamweaver CC and trying to build a fluid grid layout from scratch. Everything works fine for a while then I notice that suddenly all the grid guides are gone, the icon (next to the “Live” button) that allows me to toggle the fluid grid guides on and off is gone, and when I try to insert a new div tag…(within the "gridContainer clearfix" tag), the dialog box that opens does not have the option to “insert as fluid element.” Even when I click within a div in my page, the usual options that surround the div are gone as well. It’s as if Dreamweaver doesn’t recognize the page as a fluid grid layout, but when I preview the html, it is still responsive and looks like it is supposed to.
Does anyone know what could’ve changed that might cause this?
I even called Adobe and the tech support guy told me they are not trained in CSS and could not help me. I would think Adobe would be familiar with CSS… right?
If anyone has any suggestions that would be great?

Sudarshan Thiagarajan
The only template files I changed were the main css that I specify when creating a new FG layout.
I changed this for all three devices within the "style.css" page:
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 100%; (this is is what I changed on the mobile, tablet and desktop settings)
padding-left: 0.95%;
padding-right: 0.95%;
clear: none;
float: none;
margin-left: auto;
This the dialog box I get when trying to insert a new div (it used to ask me to insert "As a fluid element"

Fluid grid designs

I am attempting to build a fluid grid site, however, after the initial page creation the option on the "insert" tab for "fluid div" (shown in all fluid grid videos & tutorials) doesn't show up. Instead only "div" or "draw absolute position div" are there. If I click on the "div" I get an insert div dialog box showing "class". Whatever I attempt, I do not get the familiar green fluid div boxes to work with. Now the boxes are blue outlined and don"t allow me to layout the page. I have created fluid grid pages before in Dreamweaver in the past year but didn't have this problem. Where am I going wrong???

Go to View > Visual Aids or simply click the Eye icon on your toolbar.
Check Fluid Grid Layout Guides.
Also refer to this article -- Creative Cloud CS6 12.2 Enhancements to Fluid Grid Layouts
http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
Nancy O.

Placing a background image in fluid grid layout

I am having trouble building a fluid grid layout I am not sure why but when I shrink the layout it doesn't seem to work correctly
I need to do 2 things.
1) make the background image shrink as it is suppossd to. when you scale down the images doesn't shirink to tablet size and isn't there for the phone size (although I think I want a new image for phone with just one side of the (page image). on it so I assume I just link that in there under that section in in the css
2)It doesn't seem to want to align the writing so that it is only over the page section of the background image on each side (the rightcontent and left content boxes-ie they should look like text on a page)
also I want to take the page here when it is finished and make it a template for further pages (just changing the text) is that done the same as usual for the fluid grids?
Thank you in advance for the help
Here is the link that the site has been temp posted on for detail editing.
http://approvalsite.info/

Kind of makes sense.
I am not sure how to make the div tag layouts relative to the background image.
please advise.
also, I have been playing with it and it seems to be working better now.
But the issue I have with it now is that the image on the right side of the page keeps showing at the bottom of the page instead of on the top of the page directly next to the wording on the left.
does anyone know why?
I am sure it is just a simple coding issue.
help
approvalsite.info
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:    25;
    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 {
    width: 85%;
    padding-left: 1.82%;
    padding-right: 1.82%;
    background: url(../images/DSC_0014.jpg) center fixed;
    -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      -background-size: cover;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#header {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#menubar {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#leftcontent {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    height:auto;
#rightcontent {
    clear: both;
    float: right;
    margin-left: 0;
    width: 100%;
    display: block;
    height:auto;
#footer {
    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: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
    background: url(../images/DSC_0013.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      -background-size: cover;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#header {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#menubar {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#leftcontent {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#rightcontent {
    clear: both;
    float: right;
    margin-left: 0;
    width: 100%;
    display: block;
#footer {
    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: 90%;
    max-width: 1232px;
    padding-left: 0.75%;
    padding-right: 0.75%;
    margin: auto;
    background: url(../images/DSC_0013.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      -background-size: cover;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#header {
    clear: both;
    float: left;
    margin-left: 5%;
    width: 100%;
    display: block;
#menubar {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#leftcontent {
    clear: both;
    float: left;
    margin-left: 15%;
    width: 30%;
    display: block;
    padding-right: 2%;
#rightcontent {
    clear: none;
    float: right;
    margin-left: 1%;
    width: 49%;
    display: block;
    margin-right: 8%;
#footer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
HTML
<!doctype html>




<html class="">

<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="_css/layout.css" rel="stylesheet" type="text/css">


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

<link rel="stylesheet" href="index_files/css3menu1/style.css" type="text/css" />

</head>
<body>
<div class="gridContainer clearfix">
<div id="header"><h1>Jan Kardy's Literary Agency</h1></div>
<div id="menubar">

<ul id="css3menu1" class="topmenu">
    <li class="topfirst"><a href="../index.html" style="height:18px;line-height:18px;">Home</a></li>
    <li class="topmenu"><a href="../about_jankardys.html" style="height:18px;line-height:18px;">About Jan Kardys</a></li>
    <li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>Resources</span></a>
    <ul>
        <li><a href="../Education_connection.html">Education Connection</a></li>
        <li><a href="../submission_guidelines.html">Submission Guidelines</a></li>
        <li><a href="#"><span>Blogs</span></a>
        <ul>
            <li><a href="http://unicornwritersconferencect.blogspot.com/">Unicorn Writers Conference</a></li>
            <li><a href="http://advancenetworkingunicorn.blogspot.com/">Advanced Networking Blogs</a></li>
        </ul></li>
        <li><a href="../first_steps_to_publishing.html">First Steps to Publishing</a></li>
        <li><a href="../library_publish_events.html">Library & Publishing Events</a></li>
        <li><a href="#">Art Gallery</a></li>
    </ul></li>
    <li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Clients</a></li>
    <li class="toplast"><a href="#" style="height:18px;line-height:18px;">Contact Jan Kardys</a></li>
</ul>
<p style="display:none"><a href="http://css3menu.com/">Horizontal Menu Using CSS Css3Menu.com</a></p>

</div>
<div id="leftcontent">
    <p>Jan   Kardys, President of Black Hawk Literary Agency, has thirty years of   diversified publishing experience for nine major publishing   corporations. Black Hawk Literary Agency LLC represents a broad spectrum   of authors and illustrators, with a focus on new nonfiction and   fiction. <br />
    </p>
    <p>Jan was Director of   Contracts for Warner Books/Little, Brown & Company, Director of   Contracts at Macmillan Publishing Company, Charles Scribner's Sons, and   Contracts Director at Prentice Hall/Simon & Schuster. Ms. Kardys has   worked at Harcourt Brace Jovanovich, Doubleday, Scholastic, Lippincott   & Crowell, Publishers, St. Martin's Press, Conde Nast Publications,   and Google. Beginning a career in editorial, Jan also worked in art and   production in School publishing. Jan held various executive positions in   subsidiary rights, licensing, database design, imaging, royalty   conversions, contracts, copyrights & permissions departments.<br />
    </p>
    <p></p>
</div>
    <div id="rightcontent"><p><strong><center>Jan Kardys, Literary Agent<br />
    Black Hawk Literary Agency, LLC. <br />
    17 Church Hill Road,<br />Redding, CT 06896</center></strong></p>
    <p><strong><center>
      <p><img src="images/jankardys.jpg" alt="jankardys_headshot" /></p>
      <p>Blog: <a title="http://bookpublishingteacher.blogspot.com" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://bookpublishingteacher.blogspot.com">http: bookpublishingteacher.blogspot.com</a><br />
      </p>
      <p>Email: <a href="mailto:[email protected]" title="mailto:[email protected]">[email protected]</a> <br />
      </p>
      <p>Phone: 203-938-7405</p>
    </center></strong></p>
</div>
    <div id="footer"><h6>Webpage designed by Technomage Web Design</h6></div>
</div>
</body>
</html>

How do I center a div on a fluid grid layout. The div is a video player restricted to 630px by 350 px?

I am building a fluid grid website and I have a web player in a <div> that is styled to be no larger than 630px by 350 px. I can't figure out how to get this div to stay center on the page no matter if it is mobile, tablet, or desktop. Can anyone shed some light on this?

Change display to block, apply the margain: auto.

Is it possible to turn off the fluid grid function in dreamweaver during the process of building your site by mistake? It was working fine and simply stopped and I don't see how to correct what is wrong.

Is it possible to turn off the fluid grid function in dreamweaver during the process of building your site by mistake? It was working fine and simply stopped and I don't see how to correct what is wrong.

There is no specific function that turns FGL on or off.
When you say that it has stopped, do you mean that the handles no longer show?
If that is the case, then I think you may have modified the CSS to such an extent that Dreamweaver no longer recognises it as belonging to FGL.
There are a couple of avenues for you
Redo the site and make sure not to touch the FGL CSS
paste the code here so that we can see what has gone wrong.

Dreamweaver CC fluid grid site, how do I give user the option to view desktop version on mobile?

Hi all, I've just built my first fluid grid site with Dreamweaver CC, just wondering what is the easiest way to give an option to the user to view the desktop version on a mobile device (so they can zoom-in and pinch around and get to see what would be shown on a desktop). My mobile version of the site is a lot different to the desktop. I've kept all the original code structure, css, media quries and use of boilerplate etc intact from the original dreamweaver cc template. If someone could please show the best way to do this would be great

Hi Ben, yes I know but I come across people who insist on using the desktop version of sites because they are more familiar with the layout of the buttons and dont want to relearn etc, I come across this many times on sites I visit myself actually where I don't have time to relearn the navigation of the site because I know the desktop version so well, if in a rush etc.
Hi Mary Blight its definatley possible, I mean I could create a new css file with desktop version only css and use jquery to change the mobile css to this new css file when a user clicks "view desktop button", its just that I must have over 2000 lines of css and about 200 classes thats properties are spread over the 3 different media queries (with different inhertence), and I really don't want to have to manually go through each if I have to.
Was hoping I might be able to use some view port meta tags like how apple does on their devices
<meta name="viewport" content="width=device-width, initial-scale=1"> something like this to fool the device into thinking its a desktop site, or something along those lines etc.

Problem in desktop layout in "Building fluid grid layouts in Adobe Dreamweaver CS6"

In this tutorial you taught to design a responsive site ....but the Terrestrial Nursery completed page doesnot work well in Internet Explorer in 14 inches Square Monitor........that you have placed the three columns in the same alignment...but while viewing those three columns comes down one by one..........but works well in wide screen......is there any problem in the size of the monitor..........

Here is the link to the tutorial......
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
It doesnot work well in Internet Explorer 8....What to do for the responsive site to work well in all the older versions of IE....

Can you build mobile websites in Adobe CS6 Muse similiar to fluid grid layout?

Can you build mobile websites using Adobe CS6 Muse, similar to fluid grid layout?

You can certainly use Muse for hosting on other hosts as well. You do lose some of the functionality of Business Catalyst such as In Browser Editing. I just saw that you did your current one in Wordpress ... so I assume there is a blog?
If so, keep in mind that Muse alone does not have a blog feature. You can integrate a Business Catalyst Blog into it with a bit of knowledge on how BC works.
A couple videos you will want to check out are:
https://my.adobeconnect.com/p843w8dk0w9?launcher=false&fcsContent=true&pbMode=normal
and especially;
https://my.adobeconnect.com/p6wv1sik1gq/?launcher=false&fcsContent=true&pbMode=normal

Building fluid grid site - what's the best way to add a page?

I've got a one page fluid grid site going and I think I've learned enough to start adding pages. Do I use my primary css file as the file to be associated with subsequent pages? I tried to use a new css in a second page, and perhaps my mistake was that I used some classes and id's from the home page on the second page (which is to be expected as it inherits some of the design). For whatever reason, that led to the second page 'breaking' in a couple of places and I couldn't find the problem.
So I deleted it!
I'd like to begin again and start adding pages. In the creation stage, right after page definition, where it asks about css and copying over the two files (boilerplate and the js script), should I just use my existing css? When I copied over the two files, I was able to delete them and repoint the new page to the moved files (in a scripts folder and css folder).
OR
Should I create the page along with new css and just NOT use the same-named classes and id's?
Last question, when bringing up code navigator on a design page, are the css pages listed in alphabetical order or by cascade? The new page seemed to have them in alpha order rather than cascade order. They were listed in alpha, despite the fact that they were defined in the page in order of cascade.
Thanks all.

Hi Toskey,
My feelings about the Fluid Grid feature in Dreamweaver is far more
negative than David's. First, let's look at the response.js script that
simulates responsive behavior in old browsers. It can be destabilizing
in IE8 and under (causing lockups) and is, in my opinion, a waste of
time. Each month that goes by, IE8 and under become less and less
relevant and giving them a traditional fixed-width or mini-width look is
all one needs to do.
The grid approach itself, at the core of the system, is flawed and, at
best, a transitional approach as CSS has added a columns module. In
about 2 years time, the concept of grids will be native to most browsers
and how you deal with older browsers will become a matter of progressive
enhancement. That is, allow older browsers to display a conventional
type of layout while newer browsers use the newer features.
Responsive design depends on designers being able to react and change as
the CSS brainiacs of the world have regularly scheduled eureka moments
about better ways to deploy media queries. So Adobe would need to be
ready and willing (and able) to issue updates to the Fluid Grid system
on a need-to-update basis. This will never happen.
As for flexibility and practicality, and real-world application, get a
Tablet, Smartphone, and desktop computer cranked up. Now load Adobe's
home page and tell me how it reacts/responds:
1. Smartphone portrait mode
2. Smartphone landscape mode
3. Tablet portrait mode
4. Tablet landscape mode
5. In a desktop browser as you make window narrow and wide
Now load up the PVII home page (www.projectseven.com) and perform the
same tests in the same devices. How much importance you place on certain
things will dictate to you what kind of approach to take.
We think our approach is currently the most bulletproof in the world and
if something comes to our attention 2 weeks from now that indicates
there is an even better way, or if another device takes the world by
storm and needs a new query, we will issue an update ASAP.
Good luck and happy hunting.
Al Sparber - PVII

Why does DW CC 2014.1 Fluid Grid load HTML file that contains Google Analytics Tracking Code script so slowly?

I exclusively work in Fluid Grid since my site is a Responsive Web Design. I'm having trouble with slow load time in DW CC 2014.1, when my file, as they all do of course, has the Google Analytics Tracking Code script.
I'm on a Windows 8.1 using a Dell Precision M3800 Laptop with Memory 16GB (2x8GB) 1600MHz DDR3 . Each of our site's 180 or so web pages, of course, has its Google Analytics Tracking Code script. It is placed, following Google instructions, as the last entry in the <head>. Google Analytics does not instruct to place the script in the JS Folder with an scr to it, but rather in the <head>. It takes up to one and a half or two minutes for DW CC 2014.1 to load the Google Analytics Tracking Code script . That is, the grid does not show in Live View until finally analytics.js shows up in the Document Toolbar. A minute or two can add up when every page you load takes this long. And, making new Fluid Grid pages, as is done, through the Save As command; every new page made you have to deal with the minute or two wait time since all those pages have the Google Analytics Tracking Code script. Therefore, this time component alone, assuming I'm accessing and/or making 20 pages per week (and in our business this is easily the case) the math is that I'm wasting between 17 and 35 hours per year just with DW CC 2014.1 loading the much needed Google Analytics Tracking Code script.
I have loaded HTML files that do not have the Google Analytics Tracking Code script as a test and those files load at the normal quick speed.
Therefore, the new Chromium Embedded Framework browser engine has a serious load problem when it confronts an HTML5 file with a Google Analytics Tracking Code script. Oddly, the prior DW CC 2014 version, with the old browser engine did not have this slow-load problem since I was loading these same files in that DW CC version up until October 8th or so.
I think this new browser engine is a Google platform that apparently has a problem rendering or loading a Google Analytics Tracking Code script. That makes no sense.
Anyone else had this particular slow-load problem with DW CC 2014.1?
Thanks.

Wow. That sure solved the slow-load problem, at least using your suggested snippet in a simple test HTML file.
Per Google's instructions, I pasted the snippet before the closing </head> tag. And, even in that positioning in the file; the file loaded at the speed (about one second) that it did prior to DW 2014.1.
Two questions.
Will this snippet provide the same tracking data as my current GA snippet?
Because my current GA snippet is in about 200 web pages, can I retain the old snippet in most of them and place the new snippet in my approximately 5 main web pages as well as my templates so my new pages, as well as my main pages, have the new snippet. That is, can I have both snippets (i.e. old snippet in earlier pages and new snippet in main pages and new pages to be made going forward) in my website at the same time?
Of course I would not have both the old and new snippet in a web page at the same time.
I greatly appreciate any assistance anyone can provide me on this issue and thank all of you in advance.
I've provided code for both simple test files below.
Code for Asynchronous Syntax of GA script:
<!doctype html>




<html class="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Asynchronous GA Tracking Code In Head</title>
<link href="css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="/css/style.css" rel="stylesheet" type="text/css">


<script src="js/respond.min.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-73425000-1']);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="div1" class="fluid">
    <div id="test1" class="fluid ">This is the content for Layout Div Tag "test1"</div>
   <div id="test2" class="fluid ">This is the content for Layout Div Tag "test2"</div>
</div>
</body>
</html>
Code for older GA script snippet:
<!doctype html>




<html class="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test GA Tracking Code In Head</title>
<link href="css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="/css/style.css" rel="stylesheet" type="text/css">


<script src="js/respond.min.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-73425000-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="div1" class="fluid">
    <div id="test1" class="fluid ">This is the content for Layout Div Tag "test1"</div>
   <div id="test2" class="fluid ">This is the content for Layout Div Tag "test2"</div>
</div>
</body>
</html>

Div options toolbar not displayed correctly in fluid grid layout

When I select an inserted element in fluid grid layout, the options to hide, duplicate or delete the Div are not displayed. I only have the 'move up a row' arrow displayed. How do get the other options to display on the mini toolbar? My DW CS6 version is V12.0 Build 5861.

It is called as the 'Smart HUD' and was made available in 12.2 CCM (Creative Cloud) update. Your version is 12.0 which looks like a regular non-cloud license.
Are you actually a Creative Cloud subscriber? If not, you'll have to wait for a perpetual license upgrade in order to see/ use this feature.

DW6 fluid grid layout issue: writes to page instead of css file

Using DW6 (version 12, owned, build 5861) on Windows 7 64 bit.
Following tutorials and the help files to use the fluid grid layout.
Start a blank page on a new site, which inserts the starter div and new css file
Immediately save page, which also generates/saves ancillary files (js and css).
Remove inner div that's created in order to use my own (have also tried leaving the default one in place and using that)
Insert new div, within the "gridContainer clearfix" div.
Place cursor just after that new div, still inside "gridContainer clearfix" and add new "fluid grid layout div tag", new row.
Following same method, do so again.
Dreamweaver adds the generated CSS code to the actual page instead of the expected div, visibly (minified)....and everything breaks. It does *not* add the code into the CSS file from there on and the only way to have it display the div (which does not show any visual indicators since the CSS is basically lost that would do so, is to CTRL-Z to undo the last step. It undoes the CSS showing as the only content in the HTML file, and *does* show a div with the name I'd given it. If I copy/paste that generated CSS into the fluid css file *then* CTRL-Z, it looks the way it's supposed to, with drag handles, visible indentations and so on.
If I then change div widths or position, it does record those changes in the CSS file, so it appears this is only when inserting new divs after the second one that's a problem (third div inside the container is when it starts choking; none overlap).
This is repeatable, on both desktop and laptop, running the same version. I've tried saving after every div insertion, only saving at the start, code view only, split only...
I've tried searching for someone else having this issue and must not be wording the search properly, can't find anyone else seeing this. It's a weird one.
If anyone can point me to something to try so the workaround isn't needed, it would be appreciated.

OK try this workflow.
Create a new FGLayout and SAVE. This will save your CSS file with whichever name you give it.
Switch to Design View. Click on Mobile Display. Build your mobile layout first since this is what everything else is based on.
Insert a few Divs and don't worry about content. Just get the basic Div structure stacked one on top of the other like this:
<div class="gridContainer clearfix">
     <div id="div1">
          Div 1
     </div>
      <div id="div2">
          Div 2
     </div>
     <div id="div3">
          Div 3
     </div>
      <div id="div4">
          Div 4
     </div>
</div>
Hit Save and name your HTML file.   Do not edit the CSS file. DW will generate the necessary layout code for you.
Switch to Tablet Display.
Grab the right side handles to resize divs and move to row above as desired.
Save often during development.
Switch to Desktop Display and repeat.
Once your layout is built, test media queries by previewing in browsers by resizing viewport
When you are completely satisfied with your responsive layout, begin adding content and use a separate external style sheet for content styles. DO NOT EDIT boilerplate or Layout CSS files as doing so could break your layout.
Nancy O.

Fluid grid layout problem

I am trying to create a fluid grid layout. In fact it is why I purchased Dreamweaver CS6. Problem is after I create the first div which I named header it works fine. However, on inserting the next div Dreamweaver inserts the following text in my index.html:
@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:3; dw-num-cols-tablet 8; dw-num-cols-desktop: 12; dw-gutter-percentage 20; 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: 85.9444%; padding-left: 2.5277%; padding-right: 2.5277%; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #header { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #nav { 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.0625%; padding-left: 0.9687%; padding-right: 0.9687%; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #header { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #nav { 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: 88.75%; max-width: 1232px; padding-left: 0.625%; padding-right: 0.625%; margin: auto; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #header { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #nav { clear: both; float: left; margin-left: 0; width: 100%; display: block; } }
I suspected the respond.min.js file was causing the problem so I downloaded an update but it didn't help. At this point I am not able to use this feature of Dreamweaver. Any help will be appreciated.

Thanks for the help. I am using version 12.0 build 5861.
I was trying to follow the example in a book I have called Dreamweaver CS6 – The Missing Manual. When I got to the section discussing Fluid Grid Layout, I attempted to follow the example step by step. I was able to insert the first div which I named header. I looked at my css file and it had placed the #header.
I knew that I had to remain within the container div. I went into the code view and placed the cursor to the right of the header div. I then clicked the insert Fluid Grid Layout Div Tag button. That’s when it automatically inserted all of the code I indicated in my post.
I then started to follow the example in http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html . I got the same results.
I’m beginning to wonder if there is an error in the Dreamweaver software itself.
Any help you can give will be appreciated.
Sheridan

DW version 12.2 Build 6006 fluid grids

Similar Messages

Maybe you are looking for