Fluid grid layout problem

Question

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.

Answer 1

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