Skip navigation
SheridanBarber
Currently Being Moderated

Fluid grid layout problem

Jan 14, 2014 7:20 PM

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.

 
Replies
  • Currently Being Moderated
    Jan 14, 2014 7:44 PM   in reply to SheridanBarber

    You are not doing it right.  I suggest read this tutorial first and also print it out and keep it next to your computer so that you can refer to it:

     

    <http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs 6.html>

     

    Good luck.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 15, 2014 9:42 AM   in reply to SheridanBarber

    Are you quite certain you're looking at the HTML Souce Code and not one of the CSS tabs?  See screenshot.

    FluidGridCode.jpg

     

    Which ver of CS6? 

    Do you have all the latest updates?

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 15, 2014 10:18 AM   in reply to SheridanBarber

    There have been 3 updates to CS6 since it was released.  Get the 12.0.3 update below and restart your computer.

    http://www.adobe.com/support/dreamweaver/downloads_updaters.html#dwcs6 12712

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 15, 2014 7:44 PM   in reply to SheridanBarber

    You cannot attach images to an email as a response to this forum. Please go to the forum webpage and upload the image. There is something wrong with your code, I do this kind of thing every day.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points