Tables in Fluid Grid Layouts

I having trouble with tables in fluid grid layouts. They work good in a desktop environment but in tablet and phone views, the table gets cut off past the dimensions of the display giving only part of the table. Any advice on how to make it work like it should?

Thanks a lot everyone. Some good links there. What I need to do, is be able to display tabular data as seen on my current website at www.richardsinkler.net (click on the "tunings" button). One thing I have noticed, is the page I created using a template I made using fluid grid layout, doesn't give me the div ID in my css file 3 times (in phone, tablet and desktop sections) like other pages I created from the same template. I had to not display a div on the phone where I had a pic that would bleed out of the right side of the display. I was able to set the dislplay attribute to "none" and everything was fine. I guess I could hand code the same functionality into the css file for what I need, to stop the display of the tables on smaller screens. Or, could I have 2 divs on my desktop page with my tables in one, and a text version of the tables in the other? Then I could hide the text div on the larger display and use the tables, and hide the tables on the smaller displays and use the text div. Sound feasable?
Also, what is the difference between "width" and "max-width"? I will look it up, but find that real people, and not technical writers (although they are real people also), can explain it better for the average person like me.

Similar Messages

How to Scale Images in a Table in Fluid Grid Layout?

I copied over a table full of mouseover images into my new fluid grid layout. It all works fine, but in Mobile mode, all the images are compressed horizontally. How do I fix this?
http://savcp.com/howwemet-fluid.html

Strip out your table code with F&R. You could greatly reduce your code & page load by using CSS instead of image swap behaviors. Same size images would produce a nicer appearance, too.
Below, I used floated <p> tags as containers for pictures. Copy & paste this into a new, blank document and SaveAs test.html. Preview in browsers with various viewport widths to see the effect.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 document</title>
<style>
body { background: #222 }
/**BEGIN PICS**/
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
#pics {
width: 100%;
overflow:hidden;
margin: 55px auto;
border: 1px solid silver;
#pics p {
float: left;
width: 24%;
text-align: center;
/**space between**/
margin: 0 0.25%;
border: 1px solid #222;
#pics img {
max-width: 100%;
border: 5px solid #333;
/**opacity on linked pics**/
#pics a img {
/**for pre-IE8**/
filter: alpha(opacity=90);
/**for other browsers**/
opacity: .90;
/**on mouseover**/
#pics a img:hover, #pics a img:active, #pics a img:focus {
filter: alpha(opacity=100);
opacity: 1.0;
border-color: #09C;
/**ADJUST BREAKPOINTS AS REQUIRED**/
/* Special Rules for Mobiles */
@media only screen and (max-width: 480px) {
#pics p{    height:110px;}
/* Special Rules for Tablets */
@media only screen and (min-width: 481px) {
#pics p{    height:175px;}
/* Special Rules for Desktops */
@media only screen and (min-width: 600px) {
#pics p{    height:255px;}
/**end PICS**/
</style>
</head>
<body>
<div id="pics">
<p><a href="howwemet/mb3.html">
<img src="http://savcp.com/images/story/mb2.gif">
</a></p>
<p><a href="ww3.html">
<img src="http://savcp.com/images/story/ww2.gif">
</a></p>
<p><a href="bs3.html">
<img src="http://savcp.com/images/story/bs2.gif">
</a></p>
<p><a href="rr3.html">
<img src="http://savcp.com/images/story/rr2.gif">
</a></p>
<p><a href="howwemet/mb3.html">
<img src="http://savcp.com/images/story/mb2.gif">
</a></p>
<p><a href="ww3.html">
<img src="http://savcp.com/images/story/ww2.gif">
</a></p>
<p><a href="bs3.html">
<img src="http://savcp.com/images/story/bs2.gif">
</a></p>
<p><a href="rr3.html">
<img src="http://savcp.com/images/story/rr2.gif">
</a></p>
<p><a href="howwemet/mb3.html">
<img src="http://savcp.com/images/story/mb2.gif">
</a></p>
<p><a href="ww3.html">
<img src="http://savcp.com/images/story/ww2.gif">
</a></p>
<p><a href="bs3.html">
<img src="http://savcp.com/images/story/bs2.gif">
</a></p>
<p><a href="rr3.html">
<img src="http://savcp.com/images/story/rr2.gif">
</a></p>
<p><a href="wk3.html">
<img src="http://savcp.com/images/story/wk2.gif">
</a></p>
<p><a href="ss3.html">
<img src="http://savcp.com/images/story/ss2.gif">
</a></p>

</div>
</body>
</html>
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.

Understanding Fluid Grid Layout

Hi,
First of all - I apologize - my English is bad, but I hope you will understand me.
I'm currently watching some video tutorials about responsive web design, particularly about Fluid Grid Layout/Dreamweaver.
To get to the point and to be as simple as possible, my question is: In what cases elements do NOT need to have class="fluid"?
For example, here's part of the code from one video tutorial:
<body>
    <div class="gridContainer clearfix">
        <header id="header" class="fluid">
            <h1>The Best Site Ever!</h1>
            <nav id="mainnav" class="fluid">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About Us</a></li>
                    <li><a href="products.html">Products</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </header>
        <article id="intro" class="fluid">
            <h2>Some Title</h2>
            <p>Some thext... </p>
        </article>
As you can see above, <header> and <article> elements that are child-elements of <div class="gridContainer clearfix"> have class="fluid". But, let's look inside <header> element - there are two child-elemets: <h1> without and <nav> with class="fluid".
Now, correct me if I'm wrong - If some element has child-elements - it must have class="fluid" (except for the case with ul/ol and its child-elements li), right? For example, element <article id="intro"> must have class="fluid" because it has child element <h2> and <p>, but those child elements will not have class="fluid" because they don't have child-elements. On the other side, child-element (of the <header id="header" class="fluid">) <nav id="mainnav" will have class="fluid" because it has child element (ul). Only in case of lists there are exceptions...

Thank you for your response. It isn't the snapping that appears to be the problem. 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.

Fluid Grid Layout - Please help

Hello, I would sure appreciate help asap!
I have made a draft of a website and although I used the Fluid Grid layout I seem to be having issues. Layout is has header/nav, main, rightsidebar and footer. I do realize that I put a table into the header/nav and rightsidebar and will go back and update these soon, but that's not the issue I have right now.
1. Why is it when I view the pages at a 100% zoom in IE, it looks so much smaller than 100% zoom in Chrome. My concern is the MAIN Div on all the pages.
2. Why in Chrome is the rightsidebar going all the way to the right and not staying contained within the gridcontainer?
3. I thought ems were the way to go with fonts, but I can't get a "balance" between IE and Chrome design wise.....also with images?
http://www.1800gotblinds.com/index-draft.php
http://www.1800gotblinds.com/products.php
So frustrated, thanks for any help you can offer!
Donna

If you're going to use ems, you must establish a base font-size, 100% = 16px which is the average default font-size in most browsers. Your content CSS might look something like this:
/**layout**/
body {
font-size: 100%;
.gridContainer {
font-size: 16px;
/**typography**/
h1 {font-size: 3em}
h2 {font-size: 2.25em}
h3 {font-size: 1.75em}
p {font-size: 1em}
Also look at Viewport Sized Fonts
http://css-tricks.com/viewport-sized-typography/
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>




<html class="">

<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">


<script src="respond.min.js"></script>
<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É</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>© Kate Farrow 2014. Photography © 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.

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>

Fluid Grid Layout - Beginner's Questions

First, let me explain once again that I can't reply to my own threads because the "Reply" function isn't working in my browsers for some reason. (Thanks for your tips on my other questions, Ben Pleysier and Nancy O.)
Anyway, I want to modify my websites so they work in mobile devices, and I now have my first Fluid Grid Layout up and running. However, there are some bugs I need to work out.
I experimented with two or three fluid grids and just realized that they're very different for some reason. I think I inserted the wrong elements or inserted them in the wrong location.
Does the HTML code below look OK? I understand that everything is supposed to be inside div.gridContainer, which begs the question why are the last two divs (div.fluid and div#div1) OUTSIDE div.gridContainer? Are these extraneous divs that I can delete?
Am I supposed to have a div#page and div data-role="header"?
It looks like all my actual content - including the footer? - should go inside div data-role="content", right? And am I going to have to apply class="fluid Paragraph" to every paragraph in my database tables?
Some of the confusion may be because some of these unfamiliar elements (e.g. "data-role") may be HTML5, which I'm also just learning about.
If anyone could post a link to a web page(s) using Dreamweaver's Fluid Grid Layout, so I can examine the source code, it would be really helpful. Thanks!
<body>
<div class="gridContainer clearfix">
<div data-role="page" id="page">
    <div data-role="header">
    <?php require_once($BaseINC."/$MyPHP/inc/D/Shared/Body/Header.php"); ?>
    </div>
    <div data-role="content">CONTENT </div>
    <br class="clearfloat">
    <header class="fluid Header">This is the content for Layout Header Tag "Header"</header>
    <p class="fluid Paragraph">This is the content for Layout P Tag "Paragraph"</p>
    <footer class="fluid Footer"><?php require_once($BaseINC."/$MyPHP/inc/D/Shared/Footer.php"); ?></footer>
</div>
</div>

<div class="fluid DivBase">This is the content for Layout Div Tag "DivBase"</div>
<div id="div1" class="fluid">Use Insert Panel for additional Fluid Grid Layout Elements. Note: All Fluid Layout tags must be contained within the "gridContainer" div tag.</div>

</body>
</html>

#1 Success with FGLayouts comes from experience. I built 9 test layouts before I got an acceptable one. A few tips. Build Mobile first because that is what everything else is based on. Then build Tablet & finally Desktop. Do not tamper with code in FluidGrid.css or Boilerplate.css files. Use a separate, external style sheet for your content styles.
#2 Depends on whether or not you want the divs to fall outside your #gridContainer. For example, let's say you want a 100% width header & footer that stretches the entire width of your page in all devices. In that scenario, you would have to move <header> and <footer> tags above and below gridContainer div. Otherwise, everything else needs to be inside the gridContainer in order to respond to the media queries.
#3 APDivs will not work right in FluidGrid Layouts -- or any RWD for that matter -- so don't even go there.
Nancy O.

Dreamweaver cs6 and Fluid Grid Layouts!

New to Dreamweaver cs6 and Fluid Grid Layouts!
Could you please tell me if you can create several layout grid designs (in the same website) depending on the page layout you need for each
page?
The reason I am asking is my web site has different information on each page (which is laid out differently)
Maybe create layout.css and layout2.css and so on. AND TIE EACH PAGE IN WITH A PHP INCLUDE NAVIGATION PLACED ON EACH PAGE.
Is this possible.
Thanks, Mrs. White

Different layouts for different pages? It's certainly possible, but I don't recommend it. Ideally you want to work with ONE FluidGrid Layout throughout your site with some additional CSS rules for optional regions (classes & styles) that may not be required on all pages. Some examples of optional regions would be contact forms, tables, definition lists, re-usable floats, etc...
If your Responsive Design is well planned, you shouldn't need more than one main structure for mobile, one for tablet and one for desktops. If you go down the path of having different structures for 3 devices AND each site page, you will soon be wrestling with a 10,000 lb. gorilla: Herculean to build and not much fun to maintain.
Server-side includes for site wide headers, footers & navigation are a very good idea whether your site is Responsive or not. I use them all the time.
Nancy O.

Background Images in Fluid Grid Layouts

How can I get the background image that I assign to a fluid grid layout div to fill up 100% of the grid space and at the same time size the background to the fluid boundaries of the div the same way as if I had placed an image into the div? Currently, the background image lays in the grid at the pixal size of the background picture with only the portion of the background showing commenserate withthe size of the div contents. I use CS6.
Thank you.

In your CSS Styles menu, if you double click on the layout div you are working on or the grid container, you will find that the image will show if you hit the return key. If you create a table bigger than the div tag or grid container, it will automatically resize and you be able to see your image. Thats a couple of cheat ways so you can see your image when you work and when you publish.
It just means you will have several of this code: <p> </p>
The image will only show the width and the height of layout div that you are working in.
I have been able to place one fluid grid layout div tag inside on another, although I find that if I make this a template file, the template tends to break over time. Not sure it that's because I am giving Dreamweaver a headache with multiple fluid grid layout div tags inside each other.
The most I have done: 1st level grid container, 2nd level inside grid container were layout div for spry collapse panel menus, 3rd level inside layout div for spry collapse panel menus were sub menus.
I have tried placing one image in the background of the grid container and then another image over the top in a fluid grid layout div tag. The reason why they move is because of the fixed/scroll option inside the CSS style. I found that when publishing, certain browsers shift both images either up or down. This can be a problem, especially if you create an image with a white box and try to align the second image up inside.
It probably can be done, and I spent months hand coding and playing with the file. IE8 is a problem and I have added extra code which I found online. Firefox tends to move things on Windows platform, but MAC is not as bad. Safari and Chrome tends to work better with fluid grid layouts. There is an option for the early versions of browsers so they can recognise things.
To resize everything when in tablet and mobile, I found tablet grid container/layout div tage size 80-90% and mobile to 40-50% grid container/layout div tage size.
Hope this helps

How do I get my Fluid Grid Layout page to resizes from portrait to landscape for iPhones?

Starting in portrait on my iPhone 4, the fluid grid layout page does not resize when I turn to landscape. After I refresh / resize to fit the page on landscape and then turn the iPhone to portrait, the page resizes just fine. Everything seems to be working just fine on the desktop, ignoring IE. Could it be my media query tags?
If anyone knows a solution, it would be much appreciated. Thanks.
Here is my test page: http://www.bedroomandmore.com/1_b_fluidGrid.html
Here are my media query tags (the first set of rules does not have the media query tag and becomes the default):
@media only screen and (max-device-width: 480px) and (orientation : landscape) {
@media only screen and (min-width: 481px) {
@media only screen and (min-width: 769px) {
Here is most of my media query 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%;
/* Mobile Layout: 480px and below.(smartphone portrait) */
.gridContainer {
          width: 95.4184%;
          padding-left: 0.5907%;
          padding-right: 0.5907%;
#header {
          clear: both;
          float: left;
          display: block;
          margin-left: 0%;
          width: 72%;
          max-height: 0%;
          display: -moz-box; /* Firefox */
          display: -webkit-box; /* Safari and Chrome */
          display: box;
          border: none;
          top: auto;
          padding-top: 0.25em;
#menuHorizontal {
          clear: both;
          float: left;
          width: 118%;
          height:100%;
          margin-left: auto;
          position:relative;
          top:-1em;
          display: block;
#slides {
          clear: both;
          float: left;
          margin-left: 0.1em;
          width: 119%;
          position: relative;
          top: -1em;
          display: block;
                    /*Slides container: Important: Use position:relative; with top:-1em; together to position div.
                              Set the width of your slides container
                              Set to    display: none     to prevent content flash*/
.slides_container {
          clear: both;
          width: 100%;
          display: block;
                    /*Each slide: Important:
                              Set the width of your slides
                              If height not specified height will be set by the slide content
                              Set to     display: block     for original setting
                              slide_container is container size
                              slides_container div set the size of the image inside--adjust to fit image in it so it is not cropped*/
.slides_container div {
          clear: both;
          width: 69%;
          display: block;
          /* Mobile Layout: 480px. (smartphone landscape)
                              Inherits styles from Mobile Layout 480px.
                              Set to clear:none; to allow div to shift up
                              Or set to clear:both; to take a whole row of the screen*/
@media only screen and (max-device-width: 480px) and (orientation : landscape) {
.gridContainer {
          width: 95.4184%;
          padding-left: 0.7907%;
          padding-right: 0.7907%;
#header {
          clear:both;
          float: left;
          display: block;
          margin-left: auto;
          width:100%;
          display: -moz-box; /* Firefox */
          display: -webkit-box; /* Safari and Chrome */
          display: box;
          border: none;
#menuHorizontal {
          clear:both;
          float: left;
          width: 110%;
          margin-left:auto;
          display: block;
#slides {
          clear:both;
          float: left;
          margin-left: 0%;
          width: 68%;
          display: block;
                    /*Slides container: Important:
                              Set the width of your slides container
                              Set to    display: none     to prevent content flash*/
.slides_container {
          clear:both;
          float: left;
          width: 100%;
          display: block;
                    /*Each slide: Important:
                              Set the width of your slides
                              If height not specified height will be set by the slide content
                              Set to     display: block     for original setting*/
.slides_container div {
          clear:both;
          width:69%;
          display: block;
                    /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout.
                              Set to clear:none; to allow div to shift up
                              Or set to clear:both; to take a whole row of the screen*/
@media only screen and (min-width: 481px) {
.gridContainer {
          width: 95.9456%;
          padding-left: 0.5271%;
          padding-right: 0.5271%;
#header {
          clear:both;
          float: left;
          display: block;
          margin-left: auto;
          width: 100%;
          display: -moz-box; /* Firefox */
          display: -webkit-box; /* Safari and Chrome */
          display: box;
          border: none;
#menuHorizontal {
          clear:both;
          float: left;
          margin-left:auto;
          display: block;
#slides {
          clear:both;
          float: left;
          margin-left: 0%;
          width: 70%;
          display: block;
                    /*Slides container: Important:
                              Set the width of your slides container
                              Set to    display: none     to prevent content flash*/
.slides_container {
          clear:both;
          float: left;
          width: 100%;
          display: block;
                    /*Each slide: Important:
                              Set the width of your slides
                              If height not specified height will be set by the slide content
                              Set to     display: block     for original setting*/
.slides_container div {
          width: 100%;
          display: block;

I found the problem. There is a bug in Safari for iPhone 4. Use code to fix found at http://stackoverflow.com/a/6379407

Can I control column color in fluid grid layout?

The columns in fluid grid layout are gray in CC; they used to be pink. I highly prefer pink, as I almost never design with that color, and I frequently design with gray.
Is there a way to set a preference for grid column color in CC?
Thanks.

NO NO NO NO NO!
Never make your navigation editable or you will shoot
yourself in the foot
when it comes time to change a link there and you would have
to touch every
page. <sheesh>
Give each of those links a unique ID, e.g.,
<a href="page1.html" id="link1">Page 1</a> |
<a href="page2.html"
id="link2">Page 2</a>....
Then in the head of each child page, add this to the Editable
Region called
"head" -
<style type="text/css">
a#link2 { color:whatever; otherstuff:whatever; }
</style>
Now you would just edit the embedded stylesheet to change
a#link2 to a#link3
or whichever button you wanted to affect on that page.
Alternatively, you can go here -
http://www.divahtml.com and get
their
DivaGPS extension.
DO NOT MAKE YOUR NAVIGATION EDITABLE.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"malcster2" <[email protected]> wrote in
message
news:ga5dev$e89$[email protected]..
> make those links editable regions on the template, and
apply the
> neccessary styles in the individual html pages

How can I convert my web page from a fixed width layout to a fluid grid layout?

I'm taking a web design class (I'm using Dreamweaver CS6, btw) wherein the professor started us out building our websites in a fixed width layout but now I want to change my site into a fluid grid layout. My "site" so far is just one long page, and I've already designed it with fluid grid adjustments in mind (most things are centered in the layout) so it shouldn't need excessive tweaking.
Is there a way to duplicate the site folder that holds my first page, re-open a new document in fluid, then copy the code in and tweak the width parameters for the different layouts?
Did I just answer my own question? Help - I am new at this!!
Thanks all,
KC

Herbert2001 wrote:
A bit off-topic, but Osgood: have you ever used SASS or LESS? When you are building your own grid systems it can save you a tremendous amount of time, and it's a lot of fun.
Take the following simple example - it generates all the 23 css classes automatically for a 12 grid system. And simply changing one variable allows you to create and calculate any number of columns!
//variables
$desktop: 1025px;
$large-columns: 12;
@media only screen and (min-width: $desktop) {
     //regular grid span classes
    @for $i from 1 through $large-columns {
        .span-large-#{$i} {
            width: percentage($i/$large-columns);
     // push classes
    @for $i from 1 through (($large-columns)-1) {
        .push-large-#{$i} {
            margin-left: percentage($i/$large-columns);
No, not explored it yet, and may never....I don't know. I don't really make much money out of web design. It's becoming more and more difficult to find the desire to learn new techniques when the opportunities aren't really there to put them into practice on as regular basis as I would like. I've got a very good handle on css, php, html, jQuery - I'm not sure I want to add another layer at the moment, given I'm never quite sure how long I will continue to 'bang my head against the wall' . I'm getting to the stage where I keep asking myself do I really need the problems associated with learning new stuff to the point of being comfortable with it if the financial rewards at the end don't equate to the efforts of learning it.
I don't really enjoy web development if truth is known. I come from a Graphic Design background which I much prefer but somehow got side tracked and pushed in this direction and there's no way back now, lol. Whilst I concede Web Development is much more exciting its also 100 times more complex/difficult and the skills needed are considerably more.
Your example looks interesting and I should think I could pick it up reasonably easily given I work with php which uses variables on a similar basis.

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.

Dreamweaver CC has "internal error... while resizing a view" when asked to creat a fluid grid layout

Excited for expanded fluid grid layout features it had, I got Dreamweaver Creative Cloud SPECIFICALLY for that feature.
Sign up, download, install went smoothly. Open Dreamweaver CC, create new fluid grid layout, hit OK, name and desigante location of .css file and get the following error.
"An internal error occurred while resizing a view. (Cview::ResizeFrameBy)" OK
I click OK and nothing happens. App freezes. No css, no files. No nothing.
Have tried restarting, re-installing, different names and destinations for .css file. I'm running Mac 10.8.2
Literally, this is the first thing I've done w/ an ACC app and I am displeased and frustrated. Getting customer service either via forum or offshore phone call less than ideal.
(apologies for spelling error in subj. can't edit it)

Can you try the steps mentioned on the thread: http://forums.adobe.com/message/5420680
Verified Fix :
For all the Dreamweaver crashes on opening Fluid Grid pages , Closing Documents or opening files
Please make sure the default system fonts are all enabled - especially Verdana
On MAC -
Open Font BOOK from Applications
Activate VERDANA FAmily of Fonts
-Harshit yadav

Tables in Fluid Grid Layouts

Similar Messages

Maybe you are looking for