Fluid Grid Layouts, Dealing with Z-Index

Hi
I'm currently designing a website that is using fluid grid layouts in order to make it responsive for the users of the website. I'm currently designing it with div's working from the top to the bottom. I currently have a header div, a menubar div, and a mainpicture div beneath that. I'm trying to make it so that the menu bar appears above the others two divs however. I have it so that there is a shadow around the menu bar div. It appears above the header div, but beneath the main picture div so it looks funny. I've tried making the z-index of the menubar div greater than that of the main picture div but that has lead to no positive results. Is there a way to make it so i can have a div appear above another one in fluid grid layouts?
Jay Honnold
HTML
CSS
<!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="FluidLayout.css" rel="stylesheet" type="text/css">


<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="Header" class="shadowbox">
            <img src="My Website_files/flashwholesalerlogo.png" width="294px" height="42px" style="float: left; margin-top: 10px;">
    <p style="margin: 19px 5px 0px 0px; float: right; font-family: Arial; font-decoration: none; color: #616171; font-size: 24px;">800-969-2949</p>
    <img src="My Website_files/phonelogo.png" width="42px" height="42px" style="float: right; margin-top: 10px; margin-right: 10px">
</div>
<div id="MenuBar" class="shadowbox">
     <ul class="semiopaquemenu">
      <li><a href="./My Website.htm">Home</a></li>
      <li><a href="http://www.dynamicdrive.com/style/">Products</a></li>
      <li><a href="http://www.dynamicdrive.com/forums/">Services</a></li>
      <li><a href="http://tools.dynamicdrive.com">About Us</a></li>
      <li><a href="http://www.javascriptkit.com/">Customizing</a></li>
      <li><a href="http://www.cssdrive.com">Distributors</a></li>
    </ul>
</div>
<div id="ThreeReasonsContainer">
<div id="ThreeReasons">
            <img src="My Website_files/badge.png">
</div>
<div id="ThreeReasons2">
<img src="My Website_files/badge.png">
</div>
<div id="ThreeReasons3">
<img src="My Website_files/badge.png">
</div>
</div>
</div>
</body>
</html>
@charset "utf-8";
@import url("SemiopaquemenuFluid.css");
/* 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:          15;
          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: 88.626%;
          padding-left: 1.1869%;
          padding-right: 1.1869%;
#LayoutDiv1 {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
#Header {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
          height: 100px;
          /* IE10 Consumer Preview */
          background-image: -ms-linear-gradient(top, #FFFFFF 0%, #CAE4BF 100%);
          /* Mozilla Firefox */
          background-image: -moz-linear-gradient(top, #FFFFFF 0%, #CAE4BF 100%);
          /* Opera */
          background-image: -o-linear-gradient(top, #FFFFFF 0%, #CAE4BF 100%);
          /* Webkit (Safari/Chrome 10) */
          background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #CAE4BF));
          /* Webkit (Chrome 11+) */
          background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #CAE4BF 100%);
          /* W3C Markup, IE10 Release Preview */
          background-image: linear-gradient(to bottom, #FFFFFF 0%, #CAE4BF 100%);
#MenuBar {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
#MainImage {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
#ThreeReasons {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
#ThreeReasons2 {
          clear: none;
          float: left;
          margin-left: 2.6785%;
          width: 100%;
          display: block;
#ThreeReasons3 {
          clear: none;
          float: left;
          margin-left: 2.6785%;
          width: 100%;
          display: block;
#ThreeReasonsContainer {
          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.4836%;
          padding-left: 0.7581%;
          padding-right: 0.7581%;
#LayoutDiv1 {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
#Header {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
          height: 100px;
          /* IE10 Consumer Preview */
          background-image: -ms-linear-gradient(top, #FFFFFF 0%, #CAE4BF 100%);
          /* Mozilla Firefox */
          background-image: -moz-linear-gradient(top, #FFFFFF 0%, #CAE4BF 100%);
          /* Opera */
          background-image: -o-linear-gradient(top, #FFFFFF 0%, #CAE4BF 100%);
          /* Webkit (Safari/Chrome 10) */
          background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #CAE4BF));
          /* Webkit (Chrome 11+) */
          background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #CAE4BF 100%);
          /* W3C Markup, IE10 Release Preview */
          background-image: linear-gradient(to bottom, #FFFFFF 0%, #CAE4BF 100%);
#MenuBar {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
#MainImage {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
#ThreeReasons {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
#ThreeReasons2 {
          clear: none;
          float: left;
          margin-left: 1.6574%;
          width: 100%;
          display: block;
#ThreeReasons3 {
          clear: none;
          float: left;
          margin-left: 1.6574%;
          width: 100%;
          display: block;
#ThreeReasonsContainer {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
/* Desktop Layout: 769px to a max of 1000px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
          width: 89.0217%;
          max-width: 1000px;
          padding-left: 0.4891%;
          padding-right: 0.4891%;
          margin: auto;
#Header {
          clear: both;
          float: left;
          margin-left: 0;
          width: 96%;
          margin: 0px 2% 0px 2%;
          display: block;
          height: 62px;
          /* IE10 Consumer Preview */
          background-image: -ms-linear-gradient(top, #FFFFFF 0%, #CAE4BF 100%);
          /* Mozilla Firefox */
          background-image: -moz-linear-gradient(top, #FFFFFF 0%, #CAE4BF 100%);
          /* Opera */
          background-image: -o-linear-gradient(top, #FFFFFF 0%, #CAE4BF 100%);
          /* Webkit (Safari/Chrome 10) */
          background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #CAE4BF));
          /* Webkit (Chrome 11+) */
          background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #CAE4BF 100%);
          /* W3C Markup, IE10 Release Preview */
          background-image: linear-gradient(to bottom, #FFFFFF 0%, #CAE4BF 100%);
#MenuBar {
          clear: both;
          float: left;
          margin-left: 0;
          height: 63px;
          width: 100%;
          display: block;
          /* IE10 Consumer Preview */
          background-image: -ms-linear-gradient(top, #87C872 0%, #72B35A 100%);
          /* Mozilla Firefox */
          background-image: -moz-linear-gradient(top, #87C872 0%, #72B35A 100%);
          /* Opera */
          background-image: -o-linear-gradient(top, #87C872 0%, #72B35A 100%);
          /* Webkit (Safari/Chrome 10) */
          background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #87C872), color-stop(1, #72B35A));
          /* Webkit (Chrome 11+) */
          background-image: -webkit-linear-gradient(top, #87C872 0%, #72B35A 100%);
          /* W3C Markup, IE10 Release Preview */
          background-image: linear-gradient(to bottom, #87C872 0%, #72B35A 100%);
          z-index: 3;
#MainImage {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
#ThreeReasons {
          clear: both;
          float: left;
          margin-left: 0;
          width: 29.3%;
          display: block;
          margin: 0px 2% 0px 2%;
#ThreeReasons2 {
          clear: none;
          float: left;
          margin-left: 1.0989%;
          width: 100%;
          width: 29.3%;
          display: block;
          margin: 0px 2% 0px 2%;
#ThreeReasons3 {
          clear: none;
          float: left;
          margin-left: 1.0989%;
          width: 100%;
          width: 29.3%;
          display: block;
          margin: 0px 2% 0px 2%;
#ThreeReasonsContainer {
          clear: both;
          float: left;
          margin-left: 0;
          width: 96%;
          display: block;
          margin: 0px 2% 0px 2%;
          padding: 10px 0px 10px 0px;
          /* IE10 Consumer Preview */
          background-image: -ms-linear-gradient(top, #CAE4BF 0%, #FFFFFF 100%);
          /* Mozilla Firefox */
          background-image: -moz-linear-gradient(top, #CAE4BF 0%, #FFFFFF 100%);
          /* Opera */
          background-image: -o-linear-gradient(top, #CAE4BF 0%, #FFFFFF 100%);
          /* Webkit (Safari/Chrome 10) */
          background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #CAE4BF), color-stop(1, #FFFFFF));
          /* Webkit (Chrome 11+) */
          background-image: -webkit-linear-gradient(top, #CAE4BF 0%, #FFFFFF 100%);
          /* W3C Markup, IE10 Release Preview */
          background-image: linear-gradient(to bottom, #CAE4BF 0%, #FFFFFF 100%);
          z-index: 2;
Picture:

Try
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
    width: 1000px;
    margin: auto;
    background: #616161;
.header {
    height: 70px;
    width: 900px;
    margin: auto;
    background: #D3E8CA;
.nav {
    height: 90px;
    background: #7CBD66;
-moz-box-shadow:    0px 0px 5px 3px #333;
-webkit-box-shadow: 0px 0px 5px 3px #333;
box-shadow:         0px 0px 5px 3px #333;
    position: relative;
    z-index: 99;
.content {
    height: 70px;
    width: 900px;
    margin: auto;
    background: #D3E8CA;
</style>
</head>
<body>
<div class="header"></div>
<div class="nav"></div>
<div class="content"></div>
</body>
</html>

Similar Messages

Lost fluid grid layout

I use dreamweaver cc
I opened and created a page, that worked fine in fluid grid layout.
I then quit out of dreamweaver, then came back to the same page later.
Now when i open that page in dreamweaver cc, i no longer see it with the fluid grid layout or with the fluid grid handles on any of the divs.
I also no longer have the little button in the toolbar next to live button either.... to toggle the fluid layout on and off.
I did see one solution which says to go to view/ visual aids/ display fluid grid layouts
but this does not seem to be available in dreamweaver cc... only dreamweaver cs6.
I have the latest version of dreamweaver cc, and have set up the page correctly.
Thanks in advance to anyone that takes the time to help.

Hi Nancy,
My operating system is Windows 7, run at our health corporation, (so I can't upgrade to Windows 8 or 8.1.)
Im running Adobe Dreamweaver Creative Cloud built 6733 - the latest version as of today.
The problem I have been experiencing match up with those of many other users over the last 2 years. There's quite a few posts reporting the same type of thing that I am. Basically it's to do with the Fluid layout controls and the icon on the toolbar that first appears once you've created a new webpage controlled by the fluid layout stylesheet. These are first there, but after restarting DW they are gone.
i.e.
I create an HTML5 webpage saved as 'default.asp' and a fluid grid stylesheet named fg-styles.css.
The Fluid Grid layout controls are all there. (I am doing nothing else, no injection of code nothing.)
Then I close Dreamweaver
On reopening of Dreamweaver and all files, when looking at the default.asp file in Design view, the fluid grid hide/show icon on the toolbar and the fluid grid controls when clicking inside the fluid div no longer show.
I get this every single time, even after rebooting my computer.
The controls also strangely disappear during a session when I am adding new blocks within the fluid grid panel.
I am so close now from discontinuing using this tool and looking elsewhere for fluid grid solutions.
It seems such a powerful tool, but what use is it if it is unstable. Really, DW should not roll out such tools until they have been proven to work reliably.
Also documentation should be provided that makes clear when this tool cannot be used reliably and workaround solutions.
I have now spent a solid 10 hours on this, and created countless versions of the same page.
Admittedly at one stage I discovered that when adding the classic ASP line above my HTML5 code that this would not work after Dreamweaver saved my document as an .asp file, but even .html files still experience all kinds of bugs with this tool.
I hope this kinda explained what problems I am facing.
Thanks again for your time.
I will now move on to other fluid grid solutions, but am happy to re-look at the DW tool if there is a sure-fire way that fixes my problems.
Andreas

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.

How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)

How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)
and I know it is being over-ridden by
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;

Abdelqader Alnobani wrote:
How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)
and I know it is being over-ridden by
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
Logically a structure something like below should work BUT whether or not it will upset the FG I don't know as I wouldn't ever use it.
<div class="gridContainer">
Top Code Section Goes Here
</div>

<div id="fullWidth">
Full width section goes here
</div>

<div class="gridContainer">
Bottom Code Section Goes Here
</div>

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.

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/

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.

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.

Problems Creating a "Fluid Grid Layout" with Adobe Dreamweaver CS6

I am trying to create a fluid grid layout in Dreamweaver CS6 (which I know how to do), the problem is Dreamweaver started automatically saving the boilerplate.css & respond.min.js in the Dreamweaver program folder (C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS6\configuration\BuiltIn\Fluid Grid Layout\) it does not ask me to save the boilerplate.css or the respond.min.js docs as it normally does. Dreamweaver CS6 also creates a css document instead of the html page it should create. I called Adobe support, however they offer no support for "Fluid Grid Layouts", and I cannot seem to find a solution to this problem anywhere on the internet. If anyone knows how to fix this so it will work properly again it will be greatly appreciated!

Hi toger02,
If you have restored the preferences correctly and the issue is still unresolved I would recommend checking the workflow again.
Define a new site in Dreamweaver.
File < New Fluid Grid Layout < Create. Doctype set to HTML5 and no CSS file attached.
A dialog box will pop up, prompting you to save the CSS for this design. This is your custom style sheet. Give a "filename.css" < Click Save.
Once you've done that, the layout for the mobile device appears in the design view as an "untitled" new document with related files listed as "boilerplate.css","respond.min.js" and "filename.css" i.e your custom CSS file.
File < Save < "filename.html". < Save. On clicking Save it will show a popup with the message: Copy Dependent Files, which are boilerplate.css and respond.min.js.
I hope this helps else let us know if issue is on all the new sites and fluid grid pages that you create?
Thanks,
Bhawna

Problems with margins and borders in a fluid grid layout

When I create a page using the built-in fluid brid layout option in Dreamweaver CC, I have problems adding margins and borders. to the elements I've added to the page.
Is there a method to prevent the above occurring?

Hi Ken
I'm sizing each element to specific grid sizes and, working in the "show fluid grid layout guides" view am aligning the second element alongside the first by click the "up" arrow. e.g.:
I'm using a 24 grid layout (mainly because I thought it would allow more flexibility when working on two or three column layouts)
I have the first element 10 grids wide (41.348% wide) and the second element 14 grids wide (56.9% wide)
I've populated the first element with text including an h2, h3 and p element
In the second element I've inserted an EasyRotator slideshow
The third element is below the first containing text . That is also 10 grids wide
The fourth element also contains text and is 9 grids wide and has margins of left = 8% and right = 7% so that it appears below the gallery and it has a border around it.
The problem occors when I try to place a border around the element containing the EasyRotator. When I do, it become too large and drops below the first element.
How can I control this problem?
Thanks in anticipation.
David
P.S. Can you recomment any tutorials that provide info on the above.
I'm subscribed to Lynda.com, have searched adobe TV and looked at all the tutorials that are provided through Dreamweaver CC Help.
Nowhere can I find the above subject covered.
I'd like to find a tutorial which also provides exercise files to work with if possible.

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.

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 - IE Issue with Image Size

Hi,
I've been working on a new website using the CS6 Fluid Grid Layout. My site is working correctly in Chrome and Firefox but in Internet Explorer 9 and 10, and most likely all other versions, the images that resize normall in Chrome and Firefox stay at maximum size in Internet Explorer. Please could somebody take a look at my site and see where I have gone wrong in the code as I can't find the problem anywhere.
www.moleseyhire.com/index2.html
Kind regards,
Mitchell Ransom

You could set the <divs> up like:
<div id="special_1"><img src="http://www.moleseyhire.com/images/offer-1.png" alt="33% Off Shampoo"></div>
<div id="special_2"><img src="http://www.moleseyhire.com/images/offer-2.png" alt="Multi Hire"></div>
    <div id="special_3"><img src="http://www.moleseyhire.com/images/offer-3.png" alt="Multi Buy"></div>
    <div id="special_4"><img src="http://www.moleseyhire.com/images/offer-4.png" alt="10% Off Tile Cutter Accessories"></div>
Then add
#special_1, #special_2, #special_3, #special_4 {
    width: 24%;
    float: left;
    margin-right: 1%;
To the following media queries:
@media only screen and (min-width: 769px) and @media only screen and (min-width: 481px)
and:
#special_1, #special_2, #special_3, #special_4 {
    width: 49%;
    float: left;
    margin-right: 1%;
to the following media query:
/* Mobile Layout: 480px and below. */

Using fluid grid layout in Dreamweaver CC - how do I create a dropdown menu within my main navigation?

I am new to using the responsive fluid grid layouts in Dreamweaver CC - and I am unable to find any information on creating a dropdown menu within my main navigation.
Any ideas?

You'll need to find a menu system that is responsive and mobile friendly for touch screen devices.
If you have a budget to work with, Project Seven's Pop-Menu Magic3 is a commercial extension for DW that works great out of the box.
http://projectseven.com/products/menusystems/pmm3/index.htm
If you don't have a budget, you'll need to create a desktop menu and add a jQuery plugin for mobile devices.
Basic CSS Drop Menu
http://jsfiddle.net/mD4zW/28/
jQuery MeanMenu for mobile/tablet devices
MeanThemes | MeanMenu
This is a working example inside a FluidGrid Layout (resize viewport)
Alt-Web :: Fluid Grid Test
Nancy O.

CSS height property use in Fluid grid layout

Hi, I'm totally new to fluid grid layout and just got started in it. I have a div tag that has 5px height and I sucessfully applied that and seem fine only on Tablet landscape (1024x768) and Small tablet landscape (800x600), nevertheless it isn't even displaying on Mobile portrait (320x480), Mobile landscape (480x320), Small tablet portrait (600x800) and Tablet portrait (768x1024).
My coding is below
index.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="fluid.grid.layout/boilerplate.css" rel="stylesheet" type="text/css">
<link href="fluid.grid.layout/style.css" rel="stylesheet" type="text/css">


<script src="fluid.grid.layout/respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1"></div>
</div>
</body>
</html>
boilerplate.css
@charset "utf-8";
* HTML5 ✰ Boilerplate
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
* Detailed information about this CSS: h5bp.com/css
* Dreamweaver modifications:
* 1. Commented out selection highlight
* 2. Removed media queries section (we add our own in a separate file)
* ==|== normalize ==========================================================
/* =============================================================================
   HTML5 display definitions
   ========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
   Base
   ========================================================================== */
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Force vertical scrollbar in non-IE
* 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
/* Dreamweaver: uncomment these if you do want to customize the selection highlight
*::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
*::selection { background: #fe57a1; color: #fff; text-shadow: none; }
/* =============================================================================
   Links
   ========================================================================== */
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
/* =============================================================================
   Typography
   ========================================================================== */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
   Lists
   ========================================================================== */
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
/* =============================================================================
   Embedded content
   ========================================================================== */
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/e
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
* Correct overflow not hidden in IE9
svg:not(:root) { overflow: hidden; }
/* =============================================================================
   Figures
   ========================================================================== */
figure { margin: 0; }
/* =============================================================================
   Forms
   ========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
legend { border: 0; *margin-left: -7px; padding: 0; }
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
* 2. Correct inner spacing displayed oddly in IE6/7
button, input { line-height: normal; *overflow: visible; }
* Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
table button, table input { *overflow: auto; }
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
* Consistent box sizing and appearance
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
* Remove inner padding and border in FF3/4: h5bp.com/l
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* =============================================================================
   Tables
   ========================================================================== */
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/* ==|== primary styles =====================================================
   Author:
   ========================================================================== */
/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */
/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
style.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:          10;
          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: 85.5%;
          padding-left: 2.25%;
          padding-right: 2.25%;
#LayoutDiv1 {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          height:5px;
          display: block;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
          width: 97.5%;
          padding-left: 1.25%;
          padding-right: 1.25%;
#LayoutDiv1 {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          height:5px;
          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: 98%;
          max-width: 1232px;
          padding-left: 1%;
          padding-right: 1%;
          margin: auto;
#LayoutDiv1 {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
          height:5px;
          background-color:#FBB829;
respond.min.js
/*! Respond.js v1.0.1pre: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */
(function(e,h){e.respond={};respond.update=function(){};respond.mediaQueriesSupported=h;if(h){return}var u=e.document,r=u.documentElement,i=[],k=[],p=[],o={},g=30,f=u.getElementsByTagName("head")[0]||r,b=f.getElementsByTagName("link"),d=[],a=function(){var B=b,w=B.length,z=0,y,x,A,v;for(;z<w;z++){y=B[z],x=y.href,A=y.media,v=y.rel&&y.rel.toLowerCase()==="stylesheet";if(!!x&&v&&!o[x]){if(y.styleSheet&&y.styleSheet.rawCssText){m(y.styleSheet.rawCssText,x,A);o[x]=true}else{if(!/^([a-zA-Z]+?:(\/\/)?)/.test(x)||x.replace(RegExp.$1,"").split("/")[0]===e.location.host){d.push({href:x,media:A})}}}}t()},t=function(){if(d.length){var v=d.shift();n(v.href,function(w){m(w,v.href,v.media);o[v.href]=true;t()})}},m=function(G,v,x){var E=G.match(/@media[^\{]+\{([^\{\}]+\{[^\}\{]+\})+/gi),H=E&&E.length||0,v=v.substring(0,v.lastIndexOf("/")),w=function(I){return I.replace(/(url$)['"]?([^\/$'"][^:\)'"]+)['"]?(\))/g,"$1"+v+"$2$3")},y=!H&&x,B=0,A,C,D,z,F;if(v.length){v+="/"}if(y){H=1}for(;B<H;B++){A=0;if(y){C=x;k.push(w(G))}else{C=E[B].match(/@media ([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1;k.push(RegExp.$2&&w(RegExp.$2))}z=C.split(",");F=z.length;for(;A<F;A++){D=z[A];i.push({media:D.match(/(only\s+)?([a-zA-Z]+)(\sand)?/)&&RegExp.$2,rules:k.length-1,minw:D.match(/$min\-width:[\s]*([\s]*[0-9]+)px[\s]*$/)&&parseFloat(RegExp.$1),maxw:D.match(/$max\-width:[\s]*([\s]*[0-9]+)px[\s]*$/)&&parseFloat(RegExp.$1)})}}j()},l,q,j=function(E){var v="clientWidth",x=r[v],D=u.compatMode==="CSS1Compat"&&x||u.body[v]||x,z={},C=u.createDocumentFragment(),B=b[b.length-1],w=(new Date()).getTime();if(E&&l&&w-l<g){clearTimeout(q);q=setTimeout(j,g);return}else{l=w}for(var y in i){var F=i[y];if(!F.minw&&!F.maxw||(!F.minw||F.minw&&D>=F.minw)&&(!F.maxw||F.maxw&&D<=F.maxw)){if(!z[F.media]){z[F.media]=[]}z[F.media].push(k[F.rules])}}for(var y in p){if(p[y]&&p[y].parentNode===f){f.removeChild(p[y])}}for(var y in z){var G=u.createElement("style"),A=z[y].join("\n");G.type="text/css";G.media=y;if(G.styleSheet){G.styleSheet.cssText=A}else{G.appendChild(u.createTextNode(A))}C.appendChild(G);p.push(G)}f.insertBefore(C,B.nextSibling)},n=function(v,x){var w=c();if(!w){return}w.open("GET",v,true);w.onreadystatechange=function(){if(w.readyState!=4||w.status!=200&&w.status!=304){return}x(w.responseText)};if(w.readyState==4){return}w.send(null)},c=(function(){var v=false;try{v=new XMLHttpRequest()}catch(w){v=new ActiveXObject("Microsoft.XMLHTTP")}return function(){return v}})();a();respond.update=a;function s(){j(true)}if(e.addEventListener){e.addEventListener("resize",s,false)}else{if(e.attachEvent){e.attachEvent("onresize",s)}}})(this,(function(f){if(f.matchMedia){return true}var e,i=document,c=i.documentElement,g=c.firstElementChild||c.firstChild,h=!i.body,d=i.body||i.createElement("body"),b=i.createElement("div"),a="only all";b.id="mq-test-1";b.style.cssText="position:absolute;top:-99em";d.appendChild(b);b.innerHTML='_<style media="'+a+'"> #mq-test-1 { width: 9px; }</style>';if(h){c.insertBefore(d,g)}b.removeChild(b.firstChild);e=b.offsetWidth==9;if(h){c.removeChild(d)}else{d.removeChild(b)}return e})(this));
I really do appreciate your efforts to help me solve this problem... Thank you in advance

Height is determined by content. I can't think of a single reason to have a div height of 5px because almost nothing will fit inside that small a space without problems.
As to why it doesn't show up in other devices, you must have put that style into the Tablet CSS code instead of the default Mobile CSS code.
Fluid Grids build up from Mobile (applied to everything) with specific rules for Tablets, then Desktops.
Best advice, use Fluid Grids for layout only. Use a separate CSS file for content styles.
Hope this helps,
Nancy O.

Fluid Grid Layouts, Dealing with Z-Index

Similar Messages

Maybe you are looking for