Edge Animate Stage size in Dreamweaver fluid grid

I have developed an animation and have almost everything scaling and resizing acceptably in a Dreamwaevr template...except the stage.
In Edge animate I have a stage size that is 1212px x 400px. When the animation is viewed on a PC all the dimensions are fine, but when viewed in tablet or mobile phone, the vertical height remains at 400px... which leaves an enormous gap between the bottom of the animation and the next div.
I have set the stage dimensions to %, and have turned on the "link width & height" switch, and the stage still does not respond in vertical height.
How can I get the stage to respond vertically with a fluid grid layout in Dreamweaver?
I also note that every time I open up a previously saved Edge Animate file, the stage automatically opens the file at 550x400px, instead of the correct dimension for that animation, so that I have to then reset the stage size to what is correct for that animation... ..any reason this may be so?
Thanks,
Glen.

Thanks for your reply. You're right about most people not resizing their viewport during a session, but unfortunately the problem exists whether the screen is being resized or not. Refreshing the screen doesn't solve the problem.
The width of the div adjusts to the width of the screen as expected and the Edge Animate composition inside it does too, but the height of the div doesn't adjust. As the animation gets smaller to fit the width, the height of the div that contains it remains the same, leaving empty space at the bottom of the div. What is needed is for the div to scale to fit the page width proportionally. Instead, only the width is adjusting.
So I guess I need to know if there's either a way to force the div to scale proportionally or a way to tell it to adjust to the animation that it contains.

Similar Messages

  • Responsive scaling of Edge Animate composition in Dreamweaver Fluid Grid Layout

    I have created an animation in Edge Animate and have placed it in the header of a Dreamweaver Fluid Grid Layout. I have put it in a div by itself so it can be turned off in the mobile layout. When I test the layout in a browser, the Edge Animate composition scales responsively to the window size, but the height of the div it is in does not. The width of the div changes with the width of the window, but the height of the div remains the same. Because the height of the div doesn't change, as the animation responds and resizes it leaves a large empty space between the bottom of the animation and the content that follows it on the page.
    The div itself does not have a rule for it's height associated with it. It seems to me that the div is getting its height from the original size of the html object which is the animation. I tried removing the height rule for the object, but then the div clips the bottom of the animation, and again, it doesn't resize with the window.
    Is there a way I can get the div's height to resize with the size of the animation as it changes?

    Thanks for your reply. You're right about most people not resizing their viewport during a session, but unfortunately the problem exists whether the screen is being resized or not. Refreshing the screen doesn't solve the problem.
    The width of the div adjusts to the width of the screen as expected and the Edge Animate composition inside it does too, but the height of the div doesn't adjust. As the animation gets smaller to fit the width, the height of the div that contains it remains the same, leaving empty space at the bottom of the div. What is needed is for the div to scale to fit the page width proportionally. Instead, only the width is adjusting.
    So I guess I need to know if there's either a way to force the div to scale proportionally or a way to tell it to adjust to the animation that it contains.

  • Dreamweaver Fluid Grid Layout

    Hi everybody! Doesn't it feel like the Fall weather? I love it as I see the trees changing colors. I will miss Summer but will enjoy the Fall holidays.
    This question goes back to one I asked a while ago but it is different. I decided to update to DW CC and I can't tell you how much I love it as
    I have watched all of the tutorials and find it much easier than the previous version.
    One thing I decided to do was to use the Dreamweaver Fluid Grid layout. I totally understand how it works for the most part. When I go to DW CC and the load up screen, I Select fluid grid layouts and then I am presented with a smartphone version, a tablet version, and a desktop version. I left the defaults as they seem to be updated and correct. This is the thing, I design my mockups in PS. I guess I am baffled on how to code that offer to DW. When I always created a fixed layout, I would easily just measure out the divs in PS and then create them in DW sizing everything to perfectly match my initial mockup.
    Now that I am using a fluid layout. I am presented with columns. Again, I left them as the default. My question is, I am designing in PS, I am designing for a specific resolution of 1024x768. But I am just confused on if I need to decrease columns or add columns to fit that, or if I even need to at all. For my specific resolution, should I change the desktop columns to somehow correspond to a 1024x768 resolution? The default is 12 columns. In Photoshop, is there a way to insert a fluid like grid to help me with my mockup?
    Sorry if this is a lot, but I would appreciate any help, thank you so much!

    Hi Nancy! I hope you have been well. Thanks so much for taking the time to post screen shots.
    I thought I just needed to create a mockup in PS with a 1024x768 resolution, and slice images. With the fluid layout, I inserted for example, my header image or banner at the top and I inserted it in the desktop view, it looked normal. It was sliced in a 1024 x 768 mockup. But, when I go to tablet and smartphone, it shrinks and it looks distorted almost. Is there something I am doing wrong?
    You stated that I needed to create 3 mockups in PS based on those sizes. Does that mean I would have to slice them all and place them in their proper sized sections smart phone, tablet, and desktop?
    Here is a video I watched. It seems like this guy used the same image and it looks just fine in all sizes. Create fluid, responsive web pages in Dreamweaver | Learn Dreamweaver CC | Adobe TV

  • Could not find Dreamweaver Fluid Grid style sheet

    I have error in Adobe Dreamweaver CS6 which is part of the Creative Suite 6 Master Collection.
    Error was when I trying to use "rubber" <div> layout: "Could not find Dreamweaver Fluid Grid style sheet". When I clicked on the button in the sidebar, in the new document.

    Ask in the DW forum.
    Mylenium

  • "Could not find  Dreamweaver Fluid Grid style sheet error" in Dreamweaver CS6

    I have error in Adobe Dreamweaver CS6 which is part of the Creative Suite 6 Master Collection.
    Error  was when I trying to use "rubber" <div> layout: "Could not find  Dreamweaver Fluid Grid style sheet". When I clicked on the button in the  sidebar, in the new document.

    #1 Go to File > New FluidGrid Layout > select 3rd item > Hit Create button.  See screenshots.
    #2  DW will prompt you for a file name and location for your new FluidGrid.css file.  Give your style sheet a name without spaces or special characters eg. MyFluidGrid.css.  Save.
    #3 From the SourceCode tag, hit Ctrl+S to Save your HTML Page.  DW will set the corrected path to your external files: 
    MyFluidGrid.css
    boilerplate.css
    respond.js
    That's all there is to it.
    Nancy O.

  • Inserting edge animate files correctly into Dreamweaver

    Hi there all,
    I am loving edge animate! i have made all sorts of web banners and slideshows!! This is my problem, I have a project i would like to add to a 2 column layout in the right colum but eveytime i insert the project where i believe it should go it appears on the otherside of my screen not in the area i placed it or the containing div..
    Can somebody please help me.. This is my code
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--Adobe Edge Runtime-->
        <script type="text/javascript" charset="utf-8" src="publish/web/seal slider_edge.js"></script>
        <script type="text/javascript" charset="utf-8" src="publish/web/seal slider_edgeActions.js"></script>
        <script type="text/javascript" charset="utf-8" src="publish/web/seal slider_edgePreload.js"></script> 
        <style>
            .edgeLoad-EDGE-90061968 { visibility:hidden; }
        </style>
    <title>Seal Snorkeling</title>
    <style type="text/css">
    <!--
    body {
        font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
        background-color: #42413C;
        margin: 0;
        padding: 0;
        color: #000;
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl {
        padding: 0;
        margin: 0;
    h1, h2, h3, h4, h5, h6, p {
        margin-top: 0;    
        padding-right: 15px;
        padding-left: 15px;
    a img {
        border: none;
    a:link {
        color: #42413C;
        text-decoration: underline;
    a:visited {
        color: #6E6C64;
        text-decoration: underline;
    a:hover, a:active, a:focus {
        text-decoration: none;
    .container {
        width: 960px;
        background-color: #FFF;
        margin: 0 auto;
    .header {
        background-color: #ADB96E;
    .sidebar1 {
        float: left;
        width: 480px;
        background-color: #fff;
        padding-bottom: 10px;
    .content {
        Float: right;
        width: 480px;
        background-color: #fff;
        padding: 10px 0;
        padding-bottom: 10px;
    .stage {
        Float: right;
        width: 480px;
        background-color: #fff;
        padding: 10px 0;
        padding-bottom: 10px;
    .content ul, .content ol {
        padding: 0 15px 15px 40px;
    .footer {
        padding: 10px 0;
        background-color: #CCC49F;
        position: relative;
        clear: both;
    .fltrt { 
        float: right;
        margin-left: 8px;
    .fltlft {
        float: left;
        margin-right: 8px;
    .clearfloat {
        clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    -->
    </style></head>
    <body>
    <div class="container">
      <div class="header">
    <div style="width: 100%">
    <video controls="width: 987px">
    <source src="seal.mov" type="video/mov" />
    <source src="seal.mp4" type="video/mp4" />
    </video>
    </div></div>
      <div class="sidebar1">
      <img src="logo.jpg" width="470" height="216" align: "right"alt="logo" longdesc="logo.jpg" />
      <p><strong>Seal Snorkeling </strong> in Cape Town is the ultimate wildlife experience for the adventurous.  Plunge into the cool Atlantic ocean and swim with hundreds of playful Cape Fur Seals.  Interact with them in their environment and on their terms.  This half day excursion is for everyone and will be the highlight of your holiday.</p>
      <p><strong>Meeting Times </strong> <br>9am - November to February.</br><br>10am - September to Ovtober $ March to April.</br><br>Please confirm when booking.</br><br>There are afternoon options if the morning is fully booked.</p>
        <p><strong>Meeting Location </strong> <br>We meet inside Hout Bay Harbout, outside the NSRI building.</br> See directions below</p>
        <p><strong>Trip Duration</strong> <br>3 hours.  This includes kitting up, briefing and traveling to and from the island.  On average, visitors spend an hour in the water.</p>
        <p><strong>What is provided?</strong> <br>We provide all equipment, a marine guide, boat ride, educational briefing, water, biscuits, hot chocolate and even a hot water shower to warm you up!</p>
    <img src="divers.jpg" width="470" height="530" align: "right"alt="logo" longdesc="logo.jpg" />
         <div id="content">
        </div>
    </div>
      <div class="content" id="test"><div id="stage" class="EDGE-6752322">
        </div></div>
      <div class="footer">
        <p></p>
    </div>
    </div>
    </body>
    </html>
    If anyone has some advice i would be very grateful, Thanks in advance!!
    Nick

    Hi there,
    Here is a pic of what im talking about, as you can see the edge file is now hovering over the entire project again..  didnt change a thing and now back to artifacts even after restarting please please please help

  • Dreamweaver Fluid Grid Problems

      I am having some weird issues since the upgrade to Dreamweaver CC 2014.1.1. I have Dreamweaver installed on an Asus laptop with the following specifications:
    Windows 8.1 64bit
    Intel Core i7-3630QM
    NVIDIA GeForce GTX 670M 3gig
    NVidia Graphics Driver 9.18.13.4752
    24 gig ram
    256 SSD Drive (Program installed on this drive)
    750gb 7200 HD (files installed on this drive)
    The problems I am running into are as follows:
    When resizing the fluid grid in live view, I can select the right part of the div and drag it over to the left. When I try to click the left div and drag it over to the right it will not let me. I have to click to another view (for example from phone view to tablet then back to phone view) in order to drag the div over.
    If I have several pages open and I switch from one page to another the code from previous page is showing until I do a refresh.
    As many others are experiencing, it is slow when I type some text inside the div. Also when I change a CSS property (I have a separate attached CSS file) it takes a few seconds for the result to show in live view.   All in all when dealing with all this, it gets somewhat frustrating.
    I wasn't experiencing any problems like this before this upgrade.
    Any thoughts on what I can do on my end to help with this?

    Personally, I'd just go back to the older version and keep an eye on the forums until Adobe comes up with something. This is becoming much more commonplace with the latest release.
    You can roll back using the Creative Cloud Desktop App by clicking the Apps tab, then scroll down to the Filters and Previous Versions link. That will turn the Install icons into dropdown menus with the available older versions.
    I stopped upgrading DW with CC 2014.0 (last June's release), it has been rock solid for me. That version isn't available through the app though, you would have to download it directly from the link below:
    http://download.adobe.com/pub/adobe/dreamweaver/win/cc/Dreamweaver_14_LS20.exe

  • Dreamweaver Fluid Grid and Twitter Bootstrap

    Does anyone know if it's possible to graft the Twitter Bootstrap styling, elements and functioning onto the Fluid Grid in Dreamweaver CS6? If so how?
    I think it would be great to be able to have the ease of manipulating the rows and columns using the Fluid Grid and have all the cool styling and all from Twitter Bootstrap.

    Here is the complete grid css file that I'm using. It is modified from the original bootstrap. Different class names. It's wrapped in a media query so that the grid only applies above 768px. It gives you a 12 grid system.
    @media only screen and (min-width: 768px) {
    /* Grids only applied to desktop and tablet
    .col1,
    .col2,
    .col3,
    .col4,
    .col5,
    .col6,
    .col7,
    .col8,
    .col9,
    .col10,
    .col11,
    .col12
        display: inline;
      float: left;
      width: 100%;
      min-height: 28px;
      margin-left: 2.127659574%;
      *margin-left: 2.0744680846382977%;
    -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
          -ms-box-sizing: border-box;
              box-sizing: border-box;
    .row [class*="col"]:first-child {
      margin-left: 0;
    .row .col12 {
      width: 99.99999998999999%;
      *width: 99.94680850063828%;
    .row .col11 {
      width: 91.489361693%;
      *width: 91.4361702036383%;
    .row .col10 {
      width: 82.97872339599999%;
      *width: 82.92553190663828%;
    .row .col9 {
      width: 74.468085099%;
      *width: 74.4148936096383%;
    .row .col8 {
      width: 65.95744680199999%;
      *width: 65.90425531263828%;
    .row .col7 {
      width: 57.446808505%;
      *width: 57.3936170156383%;
    .row .col6 {
      width: 48.93617020799999%;
      *width: 48.88297871863829%;
    .row .col5 {
      width: 40.425531911%;
      *width: 40.3723404216383%;
    .row .col4 {
      width: 31.914893614%;
      *width: 31.8617021246383%;
    .row .col3 {
      width: 23.404255317%;
      *width: 23.3510638276383%;
    .row .col2 {
      width: 14.89361702%;
      *width: 14.8404255306383%;
    .row .col1 {
      width: 6.382978723%;
      *width: 6.329787233638298%;
    /* Prefix Extra Space >> 12 Columns
    .prefix_1 {
        padding-left: 8.333%;
    .prefix_2 {
        padding-left: 16.667%;
    .prefix_3 {
        padding-left: 25.0%;
    .prefix_4 {
        padding-left: 33.333%;
    .prefix_5 {
        padding-left: 41.667%;
    .prefix_6 {
        padding-left: 50.0%;
    .prefix_7 {
        padding-left: 58.333%;
    .prefix_8 {
        padding-left: 66.667%;
    .prefix_9 {
        padding-left: 75.0%;
    .prefix_10 {
        padding-left: 83.333%;
    .prefix_11 {
        padding-left: 91.667%;
    /* Suffix Extra Space >> 12 Columns
    .suffix_1 {
        padding-right: 8.333%;
    .suffix_2 {
        padding-right: 16.667%;
    .suffix_3 {
        padding-right: 25.0%;
    .suffix_4 {
        padding-right: 33.333%;
    .suffix_5 {
        padding-right: 41.667%;
    .suffix_6 {
        padding-right: 50.0%;
    .suffix_7 {
        padding-right: 58.333%;
    .suffix_8 {
        padding-right: 66.667%;
    .suffix_9 {
        padding-right: 75.0%;
    .suffix_10 {
        padding-right: 83.333%;
    .suffix_11 {
        padding-right: 91.667%;
    /* Push Space >> 12 Columns
    .push_1 {
        left: 8.333%;
    .push_2 {
        left: 16.667%;
    .push_3 {
        left: 25.0%;
    .push_4 {
        left: 33.333%;
    .push_5 {
        left: 41.667%;
    .push_6 {
        left: 50.0%;
    .push_7 {
        left: 58.333%;
    .push_8 {
        left: 66.667%;
    .push_9 {
        left: 75.0%;
    .push_10 {
        left: 83.333%;
    .push_11 {
        left: 91.667%;
    /* Pull Space >> 12 Columns
    .pull_1 {
        left: -8.333%;
    .pull_2 {
        left: -16.667%;
    .pull_3 {
        left: -25.0%;
    .pull_4 {
        left: -33.333%;
    .pull_5 {
        left: -41.667%;
    .pull_6 {
        left: -50.0%;
    .pull_7 {
        left: -58.333%;
    .pull_8 {
        left: -66.667%;
    .pull_9 {
        left: -75.0%;
    .pull_10 {
        left: -83.333%;
    .pull_11 {
        left: -91.667%;
    /* Clear Floated Elements
    /* http://sonspring.com/journal/clearing-floats */
    .clear {
        clear: both;
        display: block;
        overflow: hidden;
        visibility: hidden;
        width: 0;
        height: 0;
    /* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-ha ck */
    .row:before,
    .row:after {
      display: table;
      line-height: 0;
      content: "";
    .row:after {
      clear: both;
    .row {
        display: inline-block;
    * html .row {
        height: 1%;
    .row {
        display: block;
    .row .first {
        margin-left: 0;

  • Can I remove the Edge Animate stage from the body of my HTML but keep the .js file in the head?

    Howdy,
    I have designed a couple of Edge Animations for a client to insert on a single page of their website.
    The client wants to package all .js files as one for the site to reduce the pageload - but if they do that and simply remove the stage elements from this page the animations take over the page where the stages are supposed to be.
    I am hoping it is possible to add some logic to the .js file about "if these divs don't exist, do nothing" but I do not have enough coding skill to alter these Edge Animate .js files.
    Does anyone have any suggestions?
    Thanks!

    Hi Sarah,
    Thanks for the reply.
    What my clients want to accomplish is is to package all the separate .js files for the website into one file, so all the pages load faster.
    This includes the Animate.js files which are only to be used for the home page, so of course random animations appear on the rest of the pages which don't have the animate DIVs in them.
    I have suggested they package all the .js files EXCEPT the animate.js ones and just load them separately on the page the animations are to appear on.
    But they are still wanting to do them all in one package however (!!) so my question is:
    Can some code be added to the animate.js files that says something like "if these DIVs are not found, make the animation do nothing"?
    It is possible the relevant code cannot be added in which case they will have to do the animate.js files separately, but as they have asked me about it I thought I would ask people in the forum if they knew how to accomplish this.
    Cheers,
    Jim

  • What are the Photoshop design dimensions for Dreamweaver fluid grid layout?

    If I were to build a website using Dreamweavers fluid grid layout, what are the dimensions in Photoshop I should be designing with?

    FluidGrid Layouts are based on % widths; not fixed pixel widths.   As such your PShop design comps will need to be planned with these device widths in mind.
    320px - 480px wide = mobile
    481px - 768px width = small tablet
    600px - 1024px width = large tablet
    1024px - 1233px width = desktop/laptop
    Nancy O.

  • How do I place edge animate file into a dreamweaver or edge reflow project?

    I've tried to follow the video that Google pops up when I asked this question, but I got nowhere with it. Part of the problem is that the person who  is explaining the process is using a screen grab which is at unreadably low resolution.
    In any case, when I try to replace the parts from the "animation".html into the code for the index.html into their respective header and div areas, it doesn't work. Some step/s appear/s to be missing.
    If I could just take this all the way to Dreamweaver and get my logo animation to play (upon hitting a little "play" button nearby) within the same area that currently holds my non-animated logo, I'd be content.

    I do it using an iframe.
    Publish your EA project to your site (for this example, it's named animation.html in the Animate subfolder
    Create an iframe on your page where you want your EA project to go
    Embed your animation as follows: <iframe src="http://www.yoursite.com/Animate/animation.html" width="503" height="377" frameborder="0" ></iframe>
    (Of course, your size will be different)
    That's it.

  • I downloaded Dreamweaver CC 2014.1, started using it but cannot find Show Fluid Grid Layout Guides button, Resize LI.link sizing handle and 'move up a Row' arrow. Where can I find them?

    I downloaded Dreamweaver CC 2014.1, started using it but cannot find Show Fluid Grid Layout Guides button, Resize LI.link sizing handle and 'move up a Row' arrow. Where can I find them?

    You have the latest version (CC 2014.1 or 2014.1.1) in which the interface condenses Design View with Live View buttons in normal layouts.  See screenshot.
    However, in FGLayouts, Live View is the only option which poses some editing problems and has been highly criticized.
    Is there any way to display the Design View in fluid grid pages?
    New Features in CC 2014.1 October Release
    http://helpx.adobe.com/dreamweaver/using/whats-new.html
    New Features in CC 2014.1.1 February Release
    https://helpx.adobe.com/dreamweaver/using/whats-new.html#Enhancements%20to%20Live%20View%2 0editing
    You can disable this restriction by adding an X to the FGLayout CSS.
        Dreamweaver Fluid Grid Properties
        dw-num-cols-mobile:      X 4;
        dw-num-cols-tablet:        8;
        dw-num-cols-desktop:    12;
        dw-gutter-percentage:    25;
    =====================================
    Having said that, it might just  be simpler to revert to an earlier version.  Log-in to Creative Cloud Desktop app.  Go to Filters & Versions > Previous Version.  See screenshot.
    Nancy O.

  • Unable to edit elements in Fluid Grid Layout - Dreamweaver CC

    Hello. I have an issue whereby the elements inserted in to a Fluid Grid Layout designed webpage become 'locked' (??) I can no longer edit them and when they are clicked on I just get a blue border. No handles, eye, delete button etc..
    I cannot find any pattern on why this is happening and seems to be random. Although I am happy to accept I am doing something wrong..
    Any ideas?

    aytonwest
    Are you removing/modifying any of the comments in the related CSS file (custom styles file and not the ones provided by boilerplate/JQuery/etc)
    DW uses some comments to identify the page as a FG page. If you happen to remove/modify any of that, DW will stop recognizing it as a FG page.
    The comment block would look similar to:
                    Dreamweaver Fluid Grid Properties
                    dw-num-cols-mobile:                    7;
                    dw-num-cols-tablet:                      11;
                    dw-num-cols-desktop:  11;
                    dw-gutter-percentage: 67;
                    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/

  • Hide / Show fluid grids on Dreamweaver CC 2014.1

    Hello !
    How can we hide the fluid grid on the 2014.1 release ?
    Thanks a lot !

    Hide how exactly?
    Do you mean you want to use FGLayouts in 2014.1 with Design View?
    Open your Fluid Grid CSS file and add an X as shown below.  This will trick DW into thinking it's a normal layout so you can use Design View, spell check, copy & paste text, etc...
        Dreamweaver Fluid Grid Properties
        dw-num-cols-mobile:     X 4;
        dw-num-cols-tablet:        8;
        dw-num-cols-desktop:    12;
        dw-gutter-percentage:    25;
    =====================================
    Nancy O.

  • Fluid Grid Layout Alignment Issue

    I'm using Dreamweaver CC Fluid Grid Layout. This is my first time using Dreamweaver, (and first time posting to Adobe Community) so I don't have a ton of experience. Somehow, the whole body of all my pages has been aligned left and I can't find anywhere in the CSS or the HTML of the individual pages that would make it do so.  I even tried inserting a body: align: center in the CSS and also in the HTML of each page and it just won't respond. Does anyone have any ideas? I'd really REALLY appeciate some help with this because I'm totally at a loss. Below is my CSS and the HTML for my index.html .
    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:                    4;
              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/
    .fluid {
              clear: both;
              margin-left: 0;
              width: 100%;
              display: block;
              color: #FFFFFF;
              font-family: source-sans-pro;
              font-style: normal;
              font-weight: 200;
              float: left;
    .fluidList {
        list-style:none;
        list-style-image:none;
        margin:0;
        padding:0;       
    /* Mobile Layout: 480px and below. */
    .gridContainer {
              margin-left: auto;
              margin-right: auto;
              width: 86.45%;
              padding-left: 2.275%;
              padding-right: 2.275%;
              clear: none;
              float: none;
    body {align-content:center}
    #top {
              margin-left: auto;
              margin-right: auto;
              text-align: center;
              font-family: source-sans-pro;
              font-style: normal;
              font-weight: 600;
    #top {
              background-color: #1f1f1f;
    #mainnav {
              background-color:#1F1F1F
    #menuSystem {
    .menuItem {
              margin-top: 9px;
              margin-bottom: 2px;
              padding-top: 2px;
              padding-bottom: 2px;
              text-align: center;
              color: #FFFFFF;
              background-color: #1f1f1f;
              width: 100%;
              clear: both;
              margin-left: 0;
              padding-left: 0px;
              -webkit-box-sizing: content-box;
              -moz-box-sizing: content-box;
              box-sizing: content-box;
              letter-spacing: 2pt;
              text-transform: uppercase;
    .gridContainer.clearfix #top h1 {
              color: #FFFFFF;
              font-family: fredericka-the-great;
              font-style: normal;
              font-weight: 400;
              text-align: center;
              text-transform: uppercase;
              letter-spacing: 5pt;
    #hero {
    h2 {
              font-family: source-sans-pro;
              font-style: normal;
              font-weight: 200;
              text-align: center;
              margin-right: 0%;
              margin-top: 10%;
              text-decoration: overline;
              color: #FFFFFF;
    #footer {
              background-color: #1F1F1F;
              color: #FFFFFF;
              text-align: left;
    #wrapper {
              background-color: #2D2D2D;
              font-family: source-sans-pro;
              position: static;
              display: inline;
    #childpageimage {
              width: 59%;
              padding-top: 0px;
              padding-bottom: 0px;
              padding-right: 2px;
    #content2 {
              color: #FFFFFF;
              font-family: source-sans-pro;
              font-style: normal;
              font-weight: 400;
              text-align: left;
              text-indent: 0px;
              padding-left: 10px;
              padding-right: 10px;
              width: 100%;
              clear: both;
              margin-left: 0;
              float: left;
    contentgallery {
              color:#FFFFFF;
    table {
              color: #FFFFFF;
              font-family:source-sans-pro;
    #childpageimage2 img {
              width: 50%;
              float: left;
              top: 0px;
              padding-top: 5px;
    #content3 {
              color: #FFFFFF;
              font-family: source-sans-pro;
              font-style: normal;
              font-weight: 200;
              text-align: left;
              padding-left: 10px;
              padding-right: 10px;
    #contact {
              width: 100%;
              clear: both;
              margin-left: 0;
              float: right;
    #contenttitle {
              width: 100%;
              color: #FFFFFF;
              text-decoration: overline;
    body {align-content:center}
    #content {
              width: 100%;
              clear: both;
              margin-left: 0;
              color: #FFFFFF;
              font-family: source-sans-pro;
              font-style: normal;
              font-weight: 200;
    .zeroMargin_mobile {
    margin-left: 0;
    .hide_mobile {
    display: none;
    /* 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%;
              clear: none;
              float: none;
              margin-left: auto;
    a {
              color:#FFFFFF;
              text-decoration:none;
    a:hover {color:#843F93;
    #top {
    #mainnav {
    #menuSystem {
    .menuItem {
    width: 23.0769%;
    clear: none;
    margin-left: 2.5641%;
    #hero {
    #footer {
    #wrapper {
    position: static;
    #childpageimage {
    width: 100%;
    #content2 {
    width: 100%;
    clear: both;
    margin-left: 0;
    #content3 {
    #contact {
              width: 10.2564%;
              clear: both;
              margin-left: 0;
    #contenttitle {
    width: 100%;
    #content {
    width: 100%;
    clear: both;
    margin-left: 0;
    .hide_tablet {
    display: none;
    .zeroMargin_tablet {
    margin-left: 0;
    /* 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.5%;
              max-width: 1232px;
              padding-left: 0.75%;
              padding-right: 0.75%;
              margin: auto;
              clear: none;
              float: left;
              margin-left: auto;
    #top {
    #mainnav {
    #menuSystem {
    .menuItem {
              width: 23.7288%;
              margin-left: 1.6949%;
              clear: none;
    #hero {
    #footer {
    #wrapper {
              position: relative;
              height: 0%;
    #childpageimage {
              width: 49.1525%;
    #content2 {
              width: 57.6271%;
              font-size: large;
              margin-left: 1.6949%;
              clear: none;
    #content3 {
    #contact {
              width: 6.7796%;
              margin-left: 1.6949%;
              clear: none;
    #contenttitle {
    width: 32.2033%;
    #content {
    width: 40.6779%;
    margin-left: 1.6949%;
    clear: none;
    .zeroMargin_desktop {
    margin-left: 0;
    .hide_desktop {
    display: none;
    index.html
    <!doctype html>
    <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
    <!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
    <!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
    <!--[if gt IE 8]><!-->
    <html class="">
    <!--<![endif]-->
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Kate Farrow</title>
    <style type="text/css">
    body {background-color:#1F1F1F;} </style>
    <link href="boilerplate.css" rel="stylesheet" type="text/css">
    <link href="fluidgrid.css" rel="stylesheet" type="text/css">
    <!--
    To learn more about the conditional comments around the html tags at the top of the file:
    paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
    Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
    * insert the link to your js here
    * remove the link below to the html5shiv
    * add the "no-js" class to the html tags at the top
    * you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
    -->
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="respond.min.js"></script>
    <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/source-sans-pro:n2,n6,n4:default;fredericka-the-great:n4:default. js" type="text/javascript"></script>
    </head>
    <body>
    <div class="gridContainer clearfix"><div id="wrapper" class="fluid">
      <header id="top" class="fluid"><aside id="contact" class="fluid">
        <div align="center"><a href="http://www.linkedin.com/in/farrowkate" style="text-decoration:none;"><span style="font: 80% Arial,sans-serif; color:#0783B6;"><img src="http://s.c.lnkd.licdn.com/scds/common/u/img/webpromo/btn_in_20x15.png" width="40" height="30" alt="View Kate Farrow's LinkedIn profile" style="vertical-align:middle" border="0"></span></a></div>
      </aside>
        <h1 align="center">Kate Farrow</h1>
        <nav id="mainnav" class="fluid">
          <div align="center">
            <ul id="menuSystem" class="fluid fluidList">
              <li class="fluid menuItem zeroMargin_desktop zeroMargin_tablet"><a href="index1.html">Home</a></li>
              <li class="fluid menuItem"><a href="about.html">About</a></li>
              <li class="fluid menuItem"><a href="work.html">Work</a></li>
              <li class="fluid menuItem"><a href="resume.html">Resum&Eacute;</a></li>
            </ul>
          </div>
        </nav>
      </header><div id="hero" class="fluid"><img src="140210_Kate_044.jpg" alt=""/></div>
      <div id="contenttitle" class="fluid">
        <h2>Who am I?</h2>
      </div>
      <article id="content2" class="fluid">
        <p>My name is <strong>Kate Farrow</strong>. </p>
        <p>I’m a creative spirit with a great imagination, a passion for writing, and a knack for web strategy. Check out my work to see what I’m talking about.</p>
      </article>
      <footer id="footer" class="fluid">
        <p> </p>
        <p>&copy; Kate Farrow 2014. Photography &copy; L. Farrow and J. Sandhu</p>
        <p> </p>
      </footer>
    </div></div>
    </body>
    </html>

    The "align" attribute is obsolete.  See centering Pages, Images and other elements with CSS
    http://cookbooks.adobe.com/post_Centering_web_pages_and_other_elements_with_CSS-16640.html
    FluidGrids are for experienced web designers who already understand  the core concepts of HTML, CSS and  Advanced CSS Media Queries.  Don't bite off more than you can  chew for a 1st project.  Start with a stable, fixed-width layout.  When you become proficient with that, then you can take on more challenges.
    Go to File > New > Blank page > HTML.  Select a layout from the 3rd panel.  Hit Create.
    Creating your first web site in DW - (5-part tutorial)
    http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html
    Nancy O.

Maybe you are looking for