I'm designing my first website using Fluid Grid Layouts. CSS question

I'm designing my first website using CS6 and Fluid Grid Layouts so I need a lot of help. I realize CS6 creates something called a boilerplate css file. However, in addition to that file, do I have to create an individual external style sheet for my desktop, ipad, and smart phone pages (3 separate style sheets) or should I have only one external style sheet for everything?
Or this is there another recommended way to use Fluid Grid Layouts?

FluidGrid Layouts creates a boilerplate.css file, a respond.js file & a Fluid.css file for you -- you name it whatever you like. I like to call mine Fluid.css so I remember what it is.
Fluid.css contains mobile first -- upon which all others are based. Inside, CSS Media queries, you'll find code for tablet and later on desktop. So one stylesheet generated by DW covers all 3.
TIPS:
FluidGrids are very temperamental. Do not tamper with boilerplate.css or Fluid.css files. Instead create a separate external style sheet for your typography & other custom content styles.
Build mobile first, then tablet and finally desktop.
Keep your designs simple and uncluttered.
Don't worry about content until you get the layout perfected.
Have fun with it . You'll probably have to start over a few times before you get what you want.
Nancy O.

Similar Messages

Creating Adaptive Designs Using Fluid Grid Layouts in Dreamweaver CS6 | Digital Design CS6 | Adobe TV

Adobe Evangelist Greg Rewis shows how to create adaptive designs using Fluid Grid Layouts in Dreamweaver CS6.
http://adobe.ly/Iq7L8z

maybe someone here can answer this. Can I take an existing website and apply the fluid grid layout feature to it? I have one regular website that is not responsive. I've tried copying and pasting into the dreamweaver grid layout, but it doesn't respond as expected. Is this even possible?

How to convert live website to fluid grid layout

I have an existing live website. How do I convert it to a fluid grid layout?

Who is Peter?
Responsive Web Design
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
Creative Cloud 12.2 Enhancements to Fluid Grid Layouts
http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
If you want to support multiple languages, you'll need to build a mirror site with translations.
Nancy O.

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.

Making my header background image scaleable using fluid grid layout

I'm sorry I dont really know how to post a link to this site (its not online just on my laptop) But really all I have is a blank screen I just started trying to build this responsive site (the site I was building wasn't responsive so i had to start over so thats where I'm at. I started a new fluid grid layout in dreamweaver cc I use 24 collums at 100%. I deleted the the div (but not the grid container one) . First is that I'm trying to build a header using the fluid grid layout (my laptop screen is 1920 px wide so I use the full screen because I want my site to take up a users full screen). The issue is when I use a image thats 1920 px width for a header background it test great in the browers meaning it scales correct but when I check it out in the smartphone and tablet preview options within dreamweaver cc the image is chop off. How do I get the image and really the rest of the site to scale and resize correctly not just in full screen for my pc but for tablets smartphones and anyones computer? I'm baffled please help? I hope I'm being clear if not I'll try again I need your help thank you

Try to keep responses in the original thread, it keeps replies from getting confused.
http://forums.adobe.com/thread/1430668?tstart=0

Using Fluid Grid layouts | Learn Dreamweaver CS6 | Adobe TV

Designing for multiple screens can be a difficult and time-consuming task. The new Fluid Grid feature in Dreamweaver CS6 gives designers a visual way to control page layout for multiple screen sizes. It also automatically integrates cross-browser consistency through the use of HTML5 boilerplate and the respond.js library.
http://adobe.ly/IUFngo

Although the whole fluid grid layout feature suffers from a terrible implementation, this video explains what is needed to understand, and warns very well for all the strange culprits in this feature.
It takes time for most designers to get used to the idea of fluidity in a visual representation of information, and let structural building blocks flow according to alternating views and rules. Let's hope Adobe Edge Reflow helps us doing that in a better, faster way.

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.

How do I center an image inside a div tag using fluid grid layout?

where do I find and what do i use the image properties position when using the fluid grid layout. I'd like to center the image in the mobile page versus th left position in the desktop.

This is what my css codes looks like where the image is in the div tag:
#logo_links {
    clear: both;
    float: left;
    margin-left: 0;
    width: 32.2033%;
    display: block;
This is the html code where the image is:
</div>
    <div id="logo_links">
      <div align="center">
        <p><img src="../fluidgrid/images/3_7x2logo.jpg" alt="" width="236" height="110" align="left"></p>
      </div>
    </div>
I'm going to need more detail where to insert the suggested code as I am a newby!
Thanks

Fluid grid layout css error - (adobe support sucks!)

We just bought upgrades for our entire department to dreamweaver cs6 about 2 weeks ago. Today for the first time I've been trying to make use of the new fluid grid layout system. I got some of the page put together and when I then tried to insert a new fluid layout div I got an error message saying "Could not find Dreamweaver Fluid Grid style sheet". I wasn't sure what to make of it so I googled it. I found someone with a similar, not exact, error message and someone suggested they double check their css file to see if it was missing a closing }. I double checked my css files and they were fine. I tried reinstalling dreamweaver in case a file got corrupted. No go. After reopening the file, now my fluid grid pink overlays won't display.
It's as though the stylesheet where the fluid grid styles are defined isn't being recognized, however at the same time, some styles defined in that stylesheet ARE being applied to the page, but not all of them.
I called adobe support, sat on hold forever only to be told that because we purchased a downloaded version of the upgrade, we don't get the 90 days of support but have to pay $39. Are you kidding me adobe? No support without paying after we just paid literally thousands of dollars in upgrades to our cs6 packages?
Another thing that's odd is that if I start a new fluid page and save the files in a new folder, the insert new fluid grid div works fine. I know it sounds like some stylesheet got hosed, but as I said, I have double and triple checked the css file and don't see a problem. Anyone have an idea what might be wrong? thanks.

I found the problem and in fact it was a problem with the stylesheet. However, it wasn't due to any invalid styles. Apparently there are comments near the top of the stylesheet that tell dreamweaver that that's the stylesheet where the fluid grid content is stored.   It would have been helpful if they included additional comments like "DON'T REMOVE THESE COMMENTS OR YOUR'RE SCREWED AND WE WON'T HELP YOU FIGURE OUT WHY!!!". Specifically the section I removed which caused it to break was this...
          Dreamweaver Fluid Grid Properties
          dw-num-cols-mobile:                    5;
          dw-num-cols-tablet:                    8;
          dw-num-cols-desktop:          12;
          dw-gutter-percentage:          25;
          Inspiration from "Responsive Web Design" by Ethan Marcotte
          http://www.alistapart.com/articles/responsive-web-design
          and Golden Grid System by Joni Korpi
          http://goldengridsystem.com/

Using Fluid Grid layouts | Digital Design CS6 | Adobe TV

Designing for multiple screens can be a difficult and time-consuming task. The new Fluid Grid feature in Dreamweaver CS6 gives designers a visual way to control page layout for multiple screen sizes. It also automatically integrates cross-browser consistency through the use of HTML5 boilerplate and the respond.js library.
http://adobe.ly/SgbtoZ

Is there any written help on this subject because the cost of downloading these videos is too great. If I view them all it will cost me £5 a month extra in bandwidth charges as a minimum just to view help videos. Far too expensive for a charitable trust.

Is it possible to use HTML5 tags within fluid grid layouts?

Hello,
I want to build my future websites with fluid grid layouts and Dreamweaver CS6 but I don't find any help by searching the internet how I could use the HTML5 tags like "header" "nav" "footer" etc. within the fluid grid layouts automaticly. If I do anything manually it's more error-prone. Or is just the best way to stay with the "normal" div-tags???
Thank you in advance, best regards ... Björn

Those tags are equal to a normal DIV and can be used just the same, they are just not built into CS6.
Mylenium

Fluid grid layouts do not work in IE 7/8

Hello,
I just created a simple fluid grid layout with Dreamweaver CS6, but there is a problem in Internet Explorer.
IE 9 shows it right.
When I start IE 9, I press F12 to get to the developer panel. When I switch to IE 7 / 8, the layout crashes. There are no background colors and text styles anymore.
Later I will upload some screenshots.
All other browser work fine.
Where is the problem here?

When I resize layout in Firefox, the background colors disappear in mobile portrait, mobile landscape, and tablet portrait.
Reason: You added styles to your FluidGrid Desktop but not mobile & tablet.
In order for FluidGridLayouts to work, you must build your mobile styles first because everything else is based on that.
I find it's much safer to use a separate style sheet for content. When you start adding stuff to FluidGridLayout.css, things can get screwed up in a hurry.
CS6 Fluid Grid Layouts (6 min video)
http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs-using-fluid-grid-la youts-in-dreamweaver-cs6/
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
Nancy O.

Trouble styling across device views ( Mobile, Tablet, Desktop) in fluid grid layout.

Hi pros,
I’m having a problem in Dreamweaver CC laying out and styling my website using the fluid grid layout. For the record, I have not touched the boilerplate.css or JS file and have been using my own.css file to place all my .css in. I’ve managed to get some of the content in little by little but it looks nothing like my mock up. Since I’m new to Dreamweaver and coding in general, I’ve been starting my design in the desktop view. However, when I switch to tablet or mobile view and move something around, it completely moves it when I got back to the desktop view. Also, when I put in on live view or view it in a browser, I get two different looks all together. I try to make sure that my .css file is selected and under media I tried selecting the predefined media sizes and then under selector, there is usually 3 of each tag (one for each view I’m guessing), I select the tag associated with that view and change the properties from there. That hasn’t worked because when I go to live view or view in the browser, it looks completely off or it will screw with the other views. L
So here are my specific questions:
How do I style my elements specifically in each view WITHOUT messing up the desktop, or the other views? Simply clicking on a view using the icons on the bottom and styling has not worked.
Why is my live view so different from my browser view? I’m using the presets given in Dreamweaver for the desktop. When I view, say the logo and navigation in live view, everything is aligned but when I switch to my browser (chrome) it’s all crooked.
Should I be using % throughout all my properties (width, height, margin, padding, positioning)? Currently I have most of my div sized using % but some margins and other properties using px. Will that affect anything?
Can someone recommend a good tutorial? Everything that I seen either covers the basics that I already know,( adding/moving divs, switch views) but when it comes to the .css styling, they are adding a style sheet from somewhere without showing you how to do it from scratch.
Should I design the page in a non- fixed layout and then import the .css style sheet from there? If so, how do I do that without messing with the boilerplate.css file.
I’m taking a course in graphic and web design and we went over this very quickly and was given a lot of the material, however our final project (a full website with 5 pages) must be responsive and built in Dreamweaver. Any advice is greatly appreciated!

Making an external style sheet.
Go to File > New > Blank page > CSS.
Hit create button.
Add some style rules to your new style sheet and save it.
Link your HTML pages to your new style sheet using the directions below.
Dreamweaver, Linking HTML to External Style Sheets
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
Creative Cloud 12.2 Enhancements to Fluid Grid Layouts
http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
Nancy O.

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.

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>

I'm designing my first website using Fluid Grid Layouts. CSS question

Similar Messages

Maybe you are looking for