Green highlight when working with Fluid Grid Layout Div tags

What does the green highlight mean when working in Live view of a Fluid Grid Layout using Fluid Grid Layout Div Tags? Sometimes they show up, but sometimes they don't. I think it has something to do with the width setting but I can't figure out what the rule is or what the highlight indicates.
Dreamweaver CS6
Mac OSX 10.8.2
THANK YOU!!

Brian McNay wrote:
the green highlight sometimes disappears when modifying the width property of the div. My question is what does this signify?
If you change the width of a div manually in Code view or in the CSS styles panel, Dreamweaver ceases to treat it as a fluid grid layout div, and the green highlighting disappears.
To be treated as a fluid grid layout div, the width must be adjusted by dragging the handles in Design view. Dreamweaver snaps fluid grid layout divs to the grid that is defined when you first create the page, and it calculates the width and margins to many decimal places. If the width and/or margin doesn't match the grid dimensions, the highlighting disappears, and the div is treated as any other div.
It's not a bug, nor are fluid grid layout divs any different from normal ones. The idea of the grid and the highlighting is to allow you to create a responsive layout according to a hypothetical grid. Once you've created the basic structure, it's best to turn off the visual guides anyway.
Personally, I think that the implementation of fluid grid layouts in Dreamweaver CS6 leaves a lot to be desired. The basic idea is good, but it's difficult to use if you don't have a solid understanding of CSS.

Similar Messages

Why I am not able to see Fluid Grid Layout Div tag

Why I am not seeing Fluid Grid Layout Div tag In the Insert Layout menu

DW CC changed the panels. If you're working in FGLayouts, DW intuitively inserts the correct Div for you.
Nancy O.

What must i do to get Insert Fluid Grid Layout Div Tag on dreamweaver?

Why an i not able to get the Insert Fluid Grid Layout Div Tag on dreamweaver?
I am using Creative Cloud

Hi Leroy, this post in the Adobe Dreamweaver Team Blog may assist you with the updates to Dreamweaver: http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
Let me know if you still require assistance.

Insert Fluid grid layout div tag pastes CSS

I am trying to create a new fluid grid layout. I am able to insert 2 new layout divs, but after that, the "Insert Fluid grid layout div tag" fails. I am in "split" display, and the code view shows CSS instead of the HTML, and the design view shows a page of CSS code.
Control-Z always backs me up to the proper display of code and design, but the CSS file does not contain the definitions for the newly-inserted DIV.
Before insert:
After insert:

Yes. I created a new site, named as you see, for the files created as I learn the new features in CS6.
The problem I am seeing is 100% reproducable. The 1st 2 layout divs are inserted correctly, then all after that fail. After the 2nd screen shot above, a single ^Z will restore the code & display panes. I have learned that I can quickly switch into editing the CSS file, paste in the definitions for the new div (a pain, but do-able), then I can do all of the other editing, resizing, etc.
One thing I have not tried, but will, is to remove my custom key-mapping and try this in a standard workspace.

How To Center Fluid Grid Layout Div Tag

Hello I am remaking my webiste and am new to fluid grid layouts. I am trying to center the images you will see in my website into the middle.
I can use pixels to center it but it will not be centered for all screen resolutions. What do I have to change in the css rule defintion to center it all out or simply move it to the side?
WEBISTE: http://auto-republic.com
CODE: http://pastebin.com/LujvaGek
Thanks in advance!

In HTML Code View, line 53 - 56, replace what you have now with this:
<div class="gridContainer clearfix">
     <div id="LayoutDiv1">
     <p>LAYOUTDIV1 CONTENT GOES HERE<p>
     </div>
     <div id="LayoutDiv2">
     <p>LAYOUTDIV2 CONTENT GOES HERE</p>
     <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('wrecker','','images/wreckerservice/wreckerservice2.gif',1)"><img id="wrecker" src="images/wreckerservice/wreckerservice2.gif"></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('facebook','','images/facebook/facebook2.gif',1)"><img id="facebook" src="http://auto-republic.com/images/facebook/facebook1.gif"></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('askaquestion','','images/askusaquestion/askaquestion2.gif',1)"><img id="askaquestion" src="http://auto-republic.com/images/askusaquestion/askaquestion1.gif"></a>
     </div>
Nancy O.

Problems with fluid grid layout live site only showing phone view in Chrome and Firefox Feb 2015

Hi all,
I have done a complex fluid grid layout using DW 2014 CC. The site has now gone live on the web masters server setup.
Up until now the layout of the site has been working fine and responding to screen size.
Early this morning in the USA the site stopped working. The layout for some users, not all, is only showing the phone view, and takes a long time to load.
This is happening in Chrome and Firefox, but IE is displaying the site properly.
So it looks like the CSS media queries are not working on all browsers.
I am using BC for the test site, and one user having this problem can see that version of the site OK.
I noticed that Chrome has done some updates recently Chrome Releases
Has anyone else come across this problem with Chrome and Firefox with their responsive layouts?
Thanks for any help given.

Hi Ben,
Yes, thanks for this link. The Travel Health Website is one of ours, hosted on BC, and no reported problems so far. We also have another large BC website with ga code in it and users are not reporting problems with it. The Headless Way
However the problem website is hosted elsewhere on a different platform to BC. We have been developing it for three months now, and no problems so far until yesterday. The problem of the site taking ages to load, and timing out seems to be happening with about 10% of users in the USA. http://www.harrisonassessments.com/
The web developer found a user in NZ who was experiencing the slow display problem. They looked at the site with Chrome, Firefox and IE. The site would only display on IE. When the developer removed the google analytics code, the site displayed fine on all browsers for the NZ user. We are waiting for users in the USA to wake up and test the site.
So the problem definitely is related to the ga code and the responsive layout that was done by me in DW2014.1 fluid grid layout. So the related problem of DW2014.1 not being able to load htm files with ga code in them looks to be a good clue to what is going on here.
As there was a bug report for DW2014.1 and google analytics code made in the other thread, I would be interested to know if that was ever solved.
It is interesting that you are pushing Bootstrap and Foundation on me. (Big square websites here I come! lol)
I wonder if DW is going to persist with fluid grid layout then? I certainly hope so, as I have spent 12 months blood sweat and tears learning how to do it in DW.

Creating new website with Fluid Grid Layout in CS6 - CS3 Transitions problem

I am making my second website with Fluid Grid layout and as with my last one, it seems I can't use CS6 transitions. Each time I go to add a new transition, Dreamweaver stops working and shuts down. Should you be able to use the transitions function with CS6 transitions or not? In the end, what I want to do is create a behaviour where one image is swapped with another with a click (not a rollover as it won't work on mobiles, I believe).
Thank you

Add a link to jQuery's Latest Library to your document <head> tags.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
Add the jQuery function code to <script> tags in your document. I typically put them right above the closing </body> tag.
<script>
$(document).ready(function () {
    $("#one").click(function () {
        $("#one-a").toggle('slow');
    $("#two").click(function () {
        $("#two-a").toggle('slow');
    $("#three").click(function () {
        $("#three-a").toggle('slow');
</script>
</body>
As to why DW is closing you down, I don't know. That's not an expected behavior.
Without seeing your code, I'm going to guess that your CSS transition logic is incorrect or you're attempting to add transitions to the FluidGridLayout.css which is never a good idea. Always use a separate, external style sheet for your manually added content styles. Changes to either boilerplate.css or the temperamental FluidGridLayout.css files can result in problems.
Nancy O.

Fluid Grid Layout Div's not snapping correctly?

Hello, how come my fluid grid layout div's are not snapping correctly?
Here is a picture:
As you can see, the div tag "iphone1" is halfway in the other column. Shouldn't it be snapping to the nearest column? My mobile layout snaps perfectly fine but my tablet and desktop do not. Is it because my div tag "iphone1" is in another fluid grid layout tag "main-body"> Can you not place div's inside of div's with id's?
I would appreciate any help as I am sure I am doing something wrong that can easily be fixed.
Also, it is possible to change the number of columns you want for each design view after creating the page? For example, I have 20 columns in desktop view, it is possible to change to 16 if I wanted to?
Thanks in advance!

Hi dhint4,
Hope things are working out for you while using new Fluid Grids.
To answer your question around nesting of elements :
12.2 upgrade of DW fully supports the Nesting of different fluid elements within other fluid element.
Infact it also supports insertion of non-fluid(normal) element within fluid elements.
This was not available in 12.0 release.
Only caveat while nesting is not to apply same class on both Child and Parent unless the the width of both is 100%.
Also, it is possible to change the number of columns you want for each design view after creating the page? For example, I have 20 columns in desktop view, it is possible to change to 16 if I wanted to?
Currently its not possible to change the number of columns on the fly. We already have couple of feature request to support the same.
Please feel free to add your vote by creating a feature request @ :https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform
Kindly revert if you have any issues or concerns.
Cheers,
Puneet

How can i apply border for fluid grid layout div

How can i apply border for fluid grid layout div

<!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">
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>

<script type="text/javascript" charset="utf-8">
$(window).load(function() {
    $('.flexslider').flexslider();
</script>


<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1"><img src="SJV-Images/Banners/Dark-green-curved-header.png"/></div>
<div id="LayoutDiv2">
<div class="flex-container">
<div class="flexslider">
    <ul class="slides">
      <li>
        <img src="SJV-Images/Stud1.jpg"/>
      </li>
      <li>
        <img src="SJV-Images/Stud2.jpg" />
      </li>
      <li>
        <img src="SJV-Images/Stud3.jpg" />
      </li>
    </ul>
</div>
</div> </div>
<div id="Nav">This is the content for Layout Div Tag "Nav"</div>
<div id="Special_Features"><h3 align="center">SPECIAL FEATURES</h3>
<ul>
<li>
It is one of the oldest school.</li>
<li>It was first started as an orphanage for the children of British soldiers, and later moved to its current location.</li>
   <li>Rich in Anglo-Indian tradition dating back to three centuries.</li>
<li>The campus now has separate buildings within the campus for year 1 to year 8 (Junior and Sub Junior block) and year 9 to year 12 (Senior and   Super Senior block).</li>
<li>The school has montessori facilities in a separate building.</li>
<li>The School also has boarding facilities for students from distant places.</li>
</ul></div>
<div id="History"><img src="SJV-Images/His_Image.png" alt="Hisimage" class="floatleft">
<h3>HISTORY OF OUR SCHOOL</h3><P>In 1750 – a very long time ago,a missionary and a teacher, Christian Frederick Schwartz came to India to work in the Danish Mission at Tranquebar.Due to his own personal charm, genius and integrity, soon he became a trusted envoy to the court of Princes ,both hostile and friendly. He even helped in the training and education of Serfogee Rajah, the adopted son of the Tanjore Raja Tuljagee.</P></div>
<div id="Photo_Gall"><center>
    <strong>PHOTO GALLERY</strong>
</center>
<p><img src="SJV-Images/Photogall.png" width="174" height="70" class="floatright"/></p>
</div>
<div id="News_Events"><center>
    <strong>NEWS & EVENTS</strong>
</center><center>Annual Day<br><center>
    Alumni Meet<br>
    Exam Time Table<br>Parents-Teacher's Meet</center>
</center>
<br></div>
<div id="footer">This is the content for Layout Div Tag "footer"</div>
</div>
</body>
</html>

Adapt existing web site with fluid grid layout

Hi everyone,
I'm wondering if I could take a exisiting website and using Dreamweaver CS6 (which I don't owned at the moment) "easily" create associated fluid layout for tablets and smartphones.
Or do I have to start a new website "from scratch" to get the fluid layout?
I'm just beginning with website creation (only 2 at the moment) and I tried out Dreamweaver 5.5 at the beginning of 2012... since I didn't find any other tools that could do the job like I feel Dreamweaver can, I'm in the process of convincing myself I should buy Dreamweaver CS6.... I won't hesitate much longer if I could take a existing website and be able to easily adapt it to fluid layout.
Thanks for your help
Sebastien

You would have to start over with a whole new Layout. Once you get that designed, then you would need to insert content. There is no magic button for converting existing sites to Fluid Grid Layouts because it's more complicated (3 CSS layouts instead of one).
In addition, Fluid Grid is a new feature in CS6 that still needs some refinement. In order to build responsive designs that work in all devices, you must understand the technology.
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
http://www.alistapart.com/articles/responsive-web-design/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/

Trouble in Dreamweaver with fluid grid layouts

Hi! This is my first time posting here. I have been having intermittent problems in the fluid grid layouts. The sizing handles that are supposed to be there in a fluid element/div sometimes disappear along with the duplication icon and the arrow that moves a div/element up to the previous row. For instance I am working on a lesson in my online class for Dreamweaver that is asking me to style an unordered list for a menu. I want to make it into a horizontal menu where each item is 3 columns wide. Without the handles I cannot size the items in the list nor "bump them up" next to each other. Does this make any sense? Sometimes, they are there and sometimes not. Mostly not there. This is very frustrating! Can someone offer any solutions?
Paula Jo Nyman

I have the same Issue, I have been trying to get it resolved for a while now, but the live customer support is terrible, I feel like they don't read the initial question and it frustrates me how I am constantly asked questions about my question that is CLEARLY covered in the initial Question. I Have been on hold on the phone for some time now, if I get this resolved I will post an answer. It does disgust me how adobe are slowly parring the technical support over to its users.

Need help with Fluid Grid Layout and variable column balance.

I'm using the fluid grid layout. I have multiple columns that are actually fluid grid layout columns done by Dreamweaver. I'd like them to extend as high as each other (all to the maximum height of each other) within the same section. An added catch is that in the desktop layout, I have three side by side under one that takes the whole width of the page. On tablet size, it's 2x2 in a square grid. On mobile, they're vertically stacked. I'm trying to get it so that background colour and/or borders looks decent and is fully balanced, no matter which layout is hit with the fluid layout. The columns reflow, no problem. But the height of any background and/or border is variable.
Any help on fixing this?
Example at: https://music2help.thoughtburst.net/
The example doesn't have borders or colours, as it looked silly unbalanced. The music2help.css is the only one I'm modifying manually.
Love the fluid grid layout, but I need a way to make it behave decently with backgrounds/borders. Any help would be hugely appreciated!
Thanks!
mark->

I tried the solution Nancy posted. It altered things, but doesn't seem to do the trick.
Just some quick background. I did HTML from 1994 through about five years ago by hand in vi on *nix systems. I learned HTML through 4.01, and never bothered with XHTML at all. I learned CSS through most of CSS2. The CSS3 and HTML5 stuff is all new to me, but it can't be that hard. I'm not exactly a novice in JS (I've done a fair bit of AJAX programming), but it's not even close to my primary language (I'm a Perl guy).
I'm "stuck on" wanting to use Fluid Grid Layouts. It's billed as one of the selling points of DW CS6, and I really like the concept and results. I just want the results embellished a little, namely with sensible identical heights on grid containers set in the same row, so that you can apply background colours, dropshadows, and borders. That's really all I want to do that it doesn't already do.
I have a test page at: http://music2help.thoughtburst.net/ that you can try with your Quick Columns. I'd be interested to know if you can get it to work.
Here's the catch, though... Resize the browser, shrinking it inwards. (I suggest Firefox, as Chrome only shrinks so far, and you won't get to Mobile width.) As you can see, on a Tablet, one of the columns that should be equal height actually moves up a row and should be equal height with the row that, on a desktop, would take the entire width of the page area. So that's like a 4-up output in printing terms. At Mobile size, the entire thing is vertical, so none of the columns should be resized.
If your product works and can accomodate these conditions, I think I would be interested in spending the $35 it costs.
Let me know? Thanks!
EDIT: Changed URL to be non-SSL. The server has multiple vhosts on it, and I keep forgetting that I don't have a cert on this new one. Sorry about that. You can just add anything to one of the the three middle columns, if you're pulling it down to test.

Using Auto Adjustable Fluid Grid Layout Divs to balance two columns

I have a header band, two columns and then a footer band in the layout that I'm working on.I have Div on each side that is set to "Auto" for height so that the two column lengths appear to be the same size when they get to the footer band. That is how I envisioned it, in practice, "Auto" only seems to adjust to the text inside the respective divs.
Something that"hould" be soesy has gotten me banging my head for four days. I thught I had a solution, using "nesting tags" but saw that was not supported.
Any ideas?

http://whatwouldwaltdo.businesscatalyst.com/fl0916.html
Source code:
<!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="/FL916.css" rel="stylesheet" type="text/css">
<link href="/stylesheets/FL.css" rel="stylesheet" type="text/css">
<link href="/SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">


<script src="respond.min.js"></script>
<script src="/SpryAssets/SpryAccordion.js" type="text/javascript"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="bannertop"><img src="/images/Walt w CMS PIN.fw.png" alt="Walt Disney with Disneyland Cast Members (1966)"></div>
<div id="ticker">This is the content for Layout Div Tag "ticker"</div>
<div id="blocker">
<div id="leftcolumn">This is the content for Layout Div Tag "leftcolumn"
      <div id="Accordion1" class="Accordion" tabindex="0">
        <div class="AccordionPanel">
          <div class="AccordionPanelTab">HOME</div>
          <div class="AccordionPanelContent">
          <img src="/images/graphics/pagetitles/toallwhocome.gif" alt="The opening line of Walt Disney's dedication speech at Disneyland, "To all who come to this happy place, welcome ..."" width="192" align="absmiddle">
          </div>
        </div>
        <div class="AccordionPanel">
          <div class="AccordionPanelTab">Pins</div>
          <div class="AccordionPanelContent">
              <p>Ordering</p>
              <p>Presenting a Pin</p>
              <p>Collectors' Corner</p>
              <p>Why a Pin?</p>
          </div>
        </div>
        <div class="AccordionPanel">
          <div class="AccordionPanelTab">Cast Members</div>
          <div class="AccordionPanelContent">
              <p>Newest</p>
              <p>Nominate Your Own</p>
              <p>Alphabetical</p>
              <p>By Company/Location</p>
            <p>By WWWD Pin</p>
            <p>Cast Members' Reactions</p>
          </div>
        </div>
        <div class="AccordionPanel">
              <div class="AccordionPanelTab">Traditions</div>
            <div class="AccordionPanelContent">
            <p>Guests' Traditions</p>
              <p>Share Your Traditions</p>
            </div>
          </div>
        <div class="AccordionPanel">
              <div class="AccordionPanelTab">Adventures</div>
              <div class="AccordionPanelContent">
            <p>Guests' Adventures</p>
              <p>Share Your Adventures</p></div>
          </div>
        <div class="AccordionPanel">
              <div class="AccordionPanelTab">City Hall</div>
              <div class="AccordionPanelContent">
            <p>Waltisms</p>
            <p>The WWWD Story</p>
              <p>About Us</p>
              <p>That First Trip</p>
              <p>About Us</p>
              <p>Ordering</p>
              <p>About Us</p>
              <p>Ordering</p></div>
          </div>
    </div>
    <div id="social">This is the content for Layout Div Tag "social"</div>
    <div id="printer">This is the content for Layout Div Tag "printer"</div>
    <div id="banner"><img src="/images/graphics/reg sidebargraphic.gif" alt="White Mickey head with a circle of stars on a blue field"></div>
</div>
<div id="copy">This is the content for Layout Div Tag "copy"<br><br><P> <FONT SIZE="-1" COLOR="#CC0000">Copyright © 2012, 2011, 2010, 2009, 2008, 2007, 2006, 2005, 2004, 2003, 2002 Founder's
            Legacy Inc. </FONT><BR>
            <FONT SIZE="-1" COLOR="#CC0000">What Would Walt Do and WWWD are trademarks
            of Founder's Legacy, Inc.</FONT></P>
          <P><FONT COLOR="#000081" SIZE="-1">Founder's Legacy, Inc. is a member
            of the Disney Store.com Affiliate Network. As such we are authorized
            to display the Disney Store banner on any or all of our webpages.
            Founder's Legacy is also listed with The Disneyland Resort Press &
            Publicity Department, images used are with their permission.</FONT></P>
          <P><FONT COLOR="#000081" SIZE="-1">Founder's Legacy, Inc. is not part
            of The Walt Disney Company. The only other relationship between Founder's
            Legacy, Inc. and The Walt Disney Company is various members of the
            Founder's Legacy Inc.'s Board of Directors and/or their family are
            shareholders in The Walt Disney Company.</FONT><FONT SIZE="-1" COLOR="#CC0000"><BR>
            <BR>
            Additional disclosures for the benefit of insomniacs may be enjoyed
            in our <A HREF="/pages/insomniac.shtml">Insomniac's Delight
Page & Privacy Policy</A></FONT> </P></div>
</div>
<div id="mission"><FONT
             COLOR="#000081"><B>Our Mission Statement</B></FONT>
      <BLOCKQUOTE>
    <P><FONT color="#D50000" SIZE="+2"><em>To restore Magical Guest experiences through recognizing outstanding Cast Members.</em></FONT></P>
        </div>
<div id="awards"><table width="100%" border="0" cellpadding="0">
<tr>
    <TD VALIGN="middle" ALIGN="CENTER"><a href="http://LaughingPlace.com"><img src="/Assets/graphics/Affiliations/LPLogoHighest.gif" width="96" height="82" border="1" alt="LaughingPlace.com"></a></TD>
    <TD VALIGN="middle" ALIGN="CENTER"><img src="/Assets/graphics/Affiliations/seek-button01.gif" width="120" height="80"
             border="0"></TD>
    <TD WIDTH="1" VALIGN="middle" ALIGN="CENTER"><a href="http://disney.go.com/investors/index.html"><img src="/Assets/graphics/Affiliations/shareholder.gif" width="106" height="48"
             border="1"></a></TD>
    <TD VALIGN="middle" ALIGN="CENTER"> <img src="/Assets/graphics/Affiliations/safewave.gif" width="78" height="74"
             border="1"></TD>
    <TD VALIGN="middle" ALIGN="CENTER"><a href="http://wdwig.com/"><img src="/Assets/graphics/Affiliations/125x125allearsnet.gif" width="120" height="120" border="0"></a></TD>
</tr>
</table></div>
<div id="bigbottom"><P> <FONT SIZE="-1" COLOR="#CC0000">Copyright © 2012, 2011, 2010, 2009, 2008, 2007, 2006, 2005, 2004, 2003, 2002 Founder's
            Legacy Inc. </FONT><BR>
            <FONT SIZE="-1" COLOR="#CC0000">What Would Walt Do and WWWD are trademarks
            of Founder's Legacy, Inc.</FONT></P>
          <P><FONT COLOR="#000081" SIZE="-1">Founder's Legacy, Inc. is a member
            of the Disney Store.com Affiliate Network. As such we are authorized
            to display the Disney Store banner on any or all of our webpages.
            Founder's Legacy is also listed with The Disneyland Resort Press &
            Publicity Department, images used are with their permission.</FONT></P>
          <P><FONT COLOR="#000081" SIZE="-1">Founder's Legacy, Inc. is not part
            of The Walt Disney Company. The only other relationship between Founder's
            Legacy, Inc. and The Walt Disney Company is various members of the
            Founder's Legacy Inc.'s Board of Directors and/or their family are
            shareholders in The Walt Disney Company.</FONT><FONT SIZE="-1" COLOR="#CC0000"><BR>
            <BR>
            Additional disclosures for the benefit of insomniacs may be enjoyed
            in our <A HREF="/pages/insomniac.shtml">Insomniac's Delight
Page & Privacy Policy</A></FONT> </P></div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
Stylesheet:
@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 {
    margin-left: auto;
    margin-right: auto;
    width: 87.36%;
    padding-left: 1.82%;
    padding-right: 1.82%;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#bannertop {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#ticker {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#blocker {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#leftcolumn {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#copy {
    clear: none;
    float: left;
    margin-left: 4.1666%;
    width: auto;
    display: block;
#leftnav {
    clear: none;
    float: left;
    margin-left: 4.1666%;
    width: 100%;
    display: block;
#social {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    text-align: center;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 35px;
#printer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#banner {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#mission {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#awards {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#bigbottom {
    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%;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#bannertop {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#ticker {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#blocker {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#leftcolumn {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#copy {
    clear: none;
    float: left;
    width: 55%;
    display: block;
    margin: 0%;
#leftnav {
    clear: none;
    float: left;
    margin-left: 2.5641%;
    width: 100%;
    display: block;
#social {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#printer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 35.8974%;
    display: block;
#banner {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#mission {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#awards {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#bigbottom {
    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.5%;
    max-width: 1232px;
    padding-left: 0.75%;
    padding-right: 0.75%;
    margin: auto;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#bannertop {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#ticker {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#blocker {
    clear: both;
    float: left;
    margin-left: 0;
    width: 74.5762%;
    display: block;
    border-top-width: thick;
    border-right-width: thick;
    border-bottom-width: thick;
    border-left-width: thick;
    border-top-style: none;
    border-right-style: ridge;
    border-bottom-style: none;
    border-left-style: none;
    border-top-color: #C10B0F;
    border-right-color: #C10B0F;
    border-bottom-color: #C10B0F;
    border-left-color: #C10B0F;
#leftcolumn {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#copy {
    clear: none;
    float: left;
    margin-left: 1.6949%;
    width: 100%;
    display: block;
#leftnav {
    clear: none;
    float: left;
    margin-left: 1.6949%;
    width: 100%;
    display: block;
#social {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#printer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#banner {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#mission {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#awards {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#bigbottom {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;

PLEASE LET ME KNOW IF THIS IS POSSIBLE WITH FLUID GRID LAYOUT?

This is an example of what I'm trying to do. Excel was the best way for me to provide a visual. Is this possible? Every time I try to place divs in a similar layout, the div will not take up multiple rows. For example div 4 would move down and where row 7 is would now be row 4. Div 2 would have also moved down because of 5. I have a large image that needs to be placed to the left of a header and vertical menu. I'm trying to keep the header and menu seperate and the image needs to be aligned to the top left of the text. I'm sorry that I'm overcomplicating this. I must admit it surprises me that the fluid grid appears to be dictated by rows. I'm wondering if for this particular design I should just stick to a table.

I'm perplexing by your question. How do you expect the divs to move in other resolutions? For the question to be whether this is possible with a fluid grid there has to be some transformation between the layouts. If you are just looking for a static layout, that is possible. If the heights are to be fixed like that you could just specify the heights on the divs to make the height. If the divs are moving down then add the attribute clear:none; to the div, in this case 2 and 4. This will prevent the float from being cleared and pushing the element down.

Full width slider in a fluid grid layout ???

I'm fairly fluent in Dreamweaver building fixed pixel sites, but cannot seem to grasp fluid grid layouts. At least with what I'm trying to accomplish. mostly all of the tutorials Ive seen dont address anything complicated.
Question:
I'm trying to achieve a 100% nivo slider at the top of a page, with a main body area below it that only uses 960px or what ever the equivalent would be as a percentage. How do I do this?
Initially for testing purposes, I tried to experiment by simply creating two divs. One full screen and one less than that. What I am seeing first is that after creating two divs, and placing color in the divs, when viewed in browser, it does not fill the screen and leaves a small margin on either both side. Looking into the css properties, there's padding in the grid container and the percentage is less than 100%. Why If 100% is selected when setting the new document properties.
Maybe this is the wrong way to achieve what I'm trying to achieve, but I did attempt to get started here. I'm totally lost here guys and girls. Are there any advanced tuts out there that address this?
Thanks in advance!
Bob
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1">Use Insert Panel for additional Fluid Grid Layout Div tags. Note: All Layout Div tags must be inserted directly inside the "gridContainer" div tag. Nested Layout Div tags are not currently supported. </div>
<div id="LayoutDiv2">This is the content for Layout Div Tag "LayoutDiv2"</div>
</div>
</body>
</html>
@media only screen and (min-width: 769px) {
.gridContainer {
    width: 98.5507%;
    max-width: 1232px; (I deleted this)
    padding-left: 0.7246%;
    padding-right: 0.7246%;
    margin: auto;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#LayoutDiv2 {
    clear: both;
    float: left;
    margin-left: 22.549%;
    width: 54.9019%;
    display: block;

Thanks for the input. I have the slider working now. Placing it before the grid container worked. Also setting the desk top grid to 81-88% answered my other question. That renders the gutters I'm looking for. But I have a question. I asked this above. If I select 100% on the mobile, 100% for tablet, and 88% for desktop, why does DW produce padding in the css files? I keep hearing references to not mess with the css file, and create a new file to perform styling. Can I safely delete this padding and change this percentage to 100%? Confusing to me. If it's mobile first, and all calculations are based on these numbers, then.... Well you understand what I'm saying.
/* Mobile Layout: 480px and below. */
.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 96%;
    padding-left: 2%;
    padding-right: 2%;
So secondly, do we create a separate css file for styling?
And third, how do you create subsequent pages. Does this work with dwt files?
Thanks in advance. I will get my head around this soon, I promise.
B

Green highlight when working with Fluid Grid Layout Div tags

Similar Messages

Maybe you are looking for