Trouble getting Fluid Grid Div's to line-up

Hello - I've a problem with some "Fluid Grid Div's" I'm using on a "Responsive Website" I'm building and I'm hoping someone can point me in the right direction.
- Working In CS6 DW -
My "Mobile" version looks OK as a 1-column but my "Tablet" and "Desktop" version that are supposed to be 2-column have problems.
On the "Tablet" and "Desktop" the title bar in black with the orange text "SELL IT" is the problem.
When I added it to the "Desktop" version and sized it to fit over my text column (Div) that's it's suppose to go over - it pushes the text column that should be under it off to the left and I can't seem to get it to go under it.
What's really puzzling is, if I make the "SELL IT" bar 100% in width (960px) then the text column (Div) falls under it fine, but when I reduce the width of my "SELL IT" bar to the same width as the text column (Div) that goes under it - all it does is push the text column (Div) off to the left as it's doing in the page I've posted.
The "Tablet" version has some issue's also but I think if I can get the "Desktop" version fixed, it'll give me the knowledge to get the "Tablet" version working right.
I added the "EVENTS" title bar in first and sized it and got to fit perfectly, but when I added the "SELL IT" title bar - my problems started.
Please help a newbie out in the Dreamweaver CS6 world!
Thanks,
Flip
I've posted a page that represents my issue.
http://www.wakeupgraphics.com/ici_t/index03t.html

I have to agree with Ben. Despite Adobe's hype, FGLayouts feature is not for beginners. You need a firm grasp of HTML, CSS, RWD and CSS Media Queries to use it correctly.   Most beginners don't use it right.
Your HTML code is too fussy and cluttered for such a simple page. When I see excessive use of <span> <br> and <div> tags it makes me cringe. Why are you making things so complicated? You have all the style hooks you need with plain HTML selectors. h1, h2, h3, p, dl, dt, dd. Incidentally, I don't like the extra scroll bar. It's going to be sheer hell to navigate on a mobile device.    Copy & paste this code into a new, blank document.   Save and preview in browsers.
<!doctype html>




<html class="">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test_ici</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/tcycleslider.css" rel="stylesheet" type="text/css">
<style>
/**CSS Reset, fixes the box model in % layouts**/
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
/**links**/
a img { border: none }
a {
    text-decoration: none;
    color: #F90
a:visited { color: #999 }
a:hover, a:active, a:focus {
    color: #CFF;
    text-decoration: underline
body {
    background: #000 url(http://www.wakeupgraphics.com/ici_t/images/BG_LRG3bg-lr.jpg);
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-size: 100%;
    color: #EEE;
.gridContainer {
    background: rgba(51,51,51,0.5);
    border: 1px solid #000;
    width: 96%;
    margin: 0 auto;
#Div1, #Div2{
    background: rgba(0,0,0,0.3);
    border-radius: 15px;
    margin:0 0.5% 0 0.5%;
h2 {
    font-family: Arial, "Arial Bold", "Arial Bold Italic", "Arial Italic";
    font-size: 225%;
    font-weight: bold;
    color: #F60;
    background: #000;
    border-radius: 10px 10px 0 0;
dl {
    margin: 4% 0 0 4%;
    padding: 1%;
    font-size: 80%;
    color: red;
    padding-bottom: 20px
dt {
    font-style: italic;
    font-weight: bold;
    line-height: 2.5em;
    text-decoration: underline;
    color: #EEE;
dd {
    font-size: 75%;
    color: #EEE
/* Special Rules for Tablets, Desktops */
@media only screen and (min-width: 500px) {
.gridContainer { width: 80%; }
#Div1, #Div2 {
    width: 49%;
    float: left;
footer {
    clear: both;
    display: block;
</style>

<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<header> Header </header>
<div id="Div1">
<h2>SELL IT</h2>
<dl>
<dt>1965 Mustang Convertible </dt>
<dd>Matching numbers; original engine and transmission, correct exterior color and interior color. The paint and interior are new, just restored, red with white interior and top; 6 cylinder, automatic, power steering, power top, detailed engine compartment and trunk restored floor pans and exterior sheet metal. </dd>
<dt>1968 Corvette Convertible </dt>
<dd>VIN 194678S423292, New 350 engine, 4 speed transmission, New red paint, interior and top black, stainless steel brakes, Looks and drives great like new. </dd>
</dl>
</div>
<div id="Div2">
<h2>EVENTS<a href="http://www.impatientcreations.com/Events/index.htm" title="Events" target="new"></a></h2>
<dl>
August 20014
<dt>Last Saturday Montgomery, AL Cruise Night </dt>
<dd> When: Sat, August 30, 6pm – 10pm</dd>
<dd>Where: Montgomery, AL (<a href="https://www.google.com/maps/place/7900+Vaughn+Rd,+Montgomery,+AL+36116/@32.338249,-86.1784 629,17z/data=!3m1!4b1!4m2!3m1!1s0x888c2b7e9d1c573b:0x9c731719fc4988c5" title="Flip's_Grill" target="new">map</a>)</dd>
<dd>Description: Flip's Grill at Vaughn & Taylor Roads</dd>
<dd>Info: Bryant, 334.290.7509</dd>
</dl>
<dl>
September 2014
<dt>1st Friday Gadsden Cruise Nights</dt>
<dd>When: Fri, September 5, 7pm – 10pm</dd>
<dd>Where: Gadsden, AL (<a href="https://www.google.com/maps/place/Gadsden+Museum+of+Art/@34.0130619,-86.0228765,12z/data=! 3m1!5s0x888a3ea4574b4387:0x5aa4120bf25ef6e0!4m5!1m2!2m1!1sgoogle+map,+Museum,+Broad+Street +in+downtown+Gadsden!3m1!1s0x888a3ea44eefd4f1:0x644cd4cdf002c6dd" title="Broad St_cruisenight" target="new">map</a>)</dd>
<dd>Description: Broad Street, Downtown</dd>
<dd>Info: 256.390.4787</dd>
</dl>
<dl>
<dt>1st Saturday at Dairy Queen in Alabaster</dt>
<dd>When: Sat, September 6, 8am – 12pm</dd>
<dd>Where: Alabaster, AL (<a href="https://www.google.com/maps/place/780+Colonial+Promenade+Pkwy,+Alabaster,+AL+35007/@33.237 7613,-86.8018635,17z/data=!3m1!4b1!4m2!3m1!1s0x888925952b6ac7d9:0x3b5e48d7f61499e1" title="DQ_Alabster" target="new">map</a>)</dd>
<dd>Description: 1st Saturday at Dairy Queen in Alabaster</dd>
</dl>
<dl>
<dt>1st Saturday Hoover AL Cruise Night</dt>
<dd>When: Sat, September 6, 8am – 12pm</dd>
<dd>Where: Hoover, AL (<a href="https://www.google.com/maps/place/Old+Patton+Chapel+Rd,+Hoover+Square+Shopping+Center,+Hoo ver,+AL+35216/@33.3929789,-86.8073922,17z/data=!3m1!4b1!4m2!3m1!1s0x888922095c428053:0xc85 2d493c0ea3860" title="KrispyKream_Hoover" target="new">map</a>)</dd>
<dd>Description: Dixie Vintage Automobile Club KRISPY KREME COFFEE CRUISE IN, Highway 31 at Old Patton Chapel Road</dd>
<dd>Info: Gary Adams 205-706-7614</dd>
</dl>
</div>
<footer> Footer </footer>
</div>
</body>
</html>
EDIT: I changed Layout1 and Layout2 to Div1 and Div2.

Similar Messages

How to Include More Than One Font and Font Color Within a Fluid Grid Div Tag?

Using CSS code, I can make all the words within a fluid grid div tag the same font, font size, and font color, but how do I make a few of the words different?

You can style the basic text and heading selectors with CSS:
p { }
h1 { }
h2 { }
h3 { }
h4 { }
etc...
And you can make classes:
.red {color:red}
.highlight {background-color:yellow}
Then apply classes to your text or sections of it using the HTML properties panel.
<div>
     <p>This is a default paragraph style.</p>
     <p class="red">This is red.</p>
     <p class="highlight">This is highlighted.</p>
     <p>Default style with <span class="red highlight">red, highlighted text</span> and normal text.</p>
</div>
Incidentally, this will work in any layout.
How to Develop with CSS?
http://phrogz.net/css/HowToDevelopWithCSS.html
Nancy O.

New to CS6 Dreamweaver, creating a "Responsive Website" having trouble getting fluid divs to behave

Trying to create a "Responsive Website" and I'm having trouble getting my fluid divs that I create to "break" their link from the "Boilerplate" .
I'm using a "Fluid Grid layout Div" to create a section that has a transparent background of rgba(0,0,0,0.3) and that's perfect, then I add two more "Fluid Grid layout Div's" inside the transparent one to create a 2-column part in the section and that's where the trouble is.
None of the "formatting" I've set for the text in my ID's or Classes are being used - just reverts to what's in the "Boilerplate" i.e. "p,h2,h3" and I can't get it to "break" it's link the "Boilerplate" so I can apply my formatting.
I have been able to select my formatting at times but it is ignored and uses what's in the "Boilerplate".
Kept trying different ways to get it to work and now I've so many of both the ID's and Class's that their not all showing up as an option to be able select them.
I'm missing something basic and after two days it still escapes me.
Please somebody, tell me what I'm missing.
Frustrated

FluidGrid Layouts are not easy to learn. You need a good grasp of fundamental RWD concepts including CSS Media Queries. Keep your layout simple and be patient. The first time I used FGLayouts, I had to start over 9 times before I got acceptable results.
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/
Best advice for beginners:
Build Mobile Layout first. Everything else is based on this primary layout. Then build Tablet layout and finally Desktop. Don't worry about content. Just build the layout & save often during development.
DO NOT TAMPER with the boilerplate.css or FGLayout.css code. Even experts can break the layout in a hurry. Use a separate external style sheet for content and typography styles.
If you're using CS6 ver 12.0, you cannot nest divs inside other divs. Everything must be inside the .gridContainer like this:
<body>
    <div class="gridContainer">
          <div> </div>
          <div> </div>
          <div> </div>
    </div>
</body>
If you care to post a link to your online test page, we can take a look and possibly offer more suggestions.
Nancy O.

Dreamweaver CC fluid grid divs not stretching out to cover 100% of the screen

Hi there,
I am doing another responsive layout using DW CC and I have come across a problem.
The design has coloured divs stretching across the page at 100% with a coloured background and borders.
I have already done the design up as a fixed width layout to get the colour codes etc and that is working fine, with the colours stretching across the screen.
Now I am putiing the design into DW CC using fluid grid layout and there is a white border outlining the website.
I can't work out how to get rid of this. Below are extracts of my two lots of CSS stylesheets, one for a fixed grid layout and one for a responsive layout
FIXED WIDTH CSS
body,td,th {
    font-family: Calibri;
    font-size: 14px;
    color: #000;
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
*/This header wrapper stretches across the entire screen no matter what the size and does not have a white border on the left and the right
#headerWrapper {
    background-color: #000;
    height: 101px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #BDDB6D;
FLUID GRID CSS
The fluid grid layout CSS has the following in it:
.fluid {
    clear: both;
    margin-left: 0;
    width: 100%;
    float: left;
    display: block;
.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;
#div1 {
*/This header wrapper stretches across the grid layout only and has a white border on the left and the right
#headerWrapper {
    max-width: 100%;
    height: 101px;
    background-color: #000;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #BDDB6D;
What do I need to add to the fluid grid layout to make the headerWrapper div stretch across the screen, no matter what the width?
What do I have to put in the fluid grid CSS to get it to do this?
Thanks in advance!

I did it! I can't believe it. The code I used is follow. The bar divs set the colour and border across the entire page and the wrapper divs contain the content in the various bars across the page.
I must say that DW CC fluid grids are much more stable to work with and can take a lot of hand coding now. It is a great improvement on when I tried to use Fluid grids on a project last year.
IN THE PHONE MEDIA QUERY SECTION
.gridContainer {
          margin-left: auto;
          margin-right: auto;
          width: 100%;
          padding-left: 0;
          padding-right: 0;
          clear: none;
          float: none;
#headerBar {
          background-color: #000;
          min-height: 101px;
          border-bottom-width: 2px;
          border-bottom-style: solid;
          border-bottom-color: #BDDB6D;
          padding-top: 2.735px;
#headerWrapper {
          width: 86.45%;
    padding-left: 2.275%;
    padding-right: 2.275%;
          clear: none;
    float: none;
          margin-left: auto;
#menuAnimationBar {
          background-color: #B7B7B7;
          height: 293px;
          border-bottom-width: 2px;
          border-bottom-style: solid;
          border-bottom-color: #BDDB6D;
          background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(153,153,153,1.00)),color-stop( 100% , rgba(192,192,192,1.00)));
          background-image: -webkit-linear-gradient(270deg,rgba(153,153,153,1.00) 0%,rgba(192,192,192,1.00) 100%);
          background-image: linear-gradient(180deg,rgba(153,153,153,1.00) 0%,rgba(192,192,192,1.00) 100%);
display: none;
#contentBar {
          background-color: #F8FCF1;
          min-height: 200px;
          background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(245,251,234,1.00)),color-stop( 100% , rgba(251,253,247,1.00)));
          background-image: -webkit-linear-gradient(270deg,rgba(245,251,234,1.00) 0%,rgba(251,253,247,1.00) 100%);
          background-image: linear-gradient(180deg,rgba(245,251,234,1.00) 0%,rgba(251,253,247,1.00) 100%);
#contentWrapper {
          width: 86.45%;
    padding-left: 2.275%;
    padding-right: 2.275%;
          clear: none;
    float: none;
          margin-left: auto;
#socialMediaBar {
          background-color: #000;
          min-height: 83px;
          border-top-width: 2px;
          border-bottom-width: 2px;
          border-top-style: solid;
          border-bottom-style: solid;
          border-top-color: #BDDB6D;
          border-bottom-color: #BDDB6D;
#socialMediaWrapper {
          color: #FFF;
          width: 86.45%;
          padding-left: 2.275%;
          padding-right: 2.275%;
          clear: none;
          float: none;
          margin-left: auto;
          padding-top: 2.275%;
#footerBar {
          color: #FFF;
          background-color: #AAAAAA;
          min-height: 176px;
          background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(153,153,153,1.00)),color-stop( 100% , rgba(185,185,185,1.00)));
          background-image: -webkit-linear-gradient(270deg,rgba(153,153,153,1.00) 0%,rgba(185,185,185,1.00) 100%);
          background-image: linear-gradient(180deg,rgba(153,153,153,1.00) 0%,rgba(185,185,185,1.00) 100%);
#footerWrapper {
          width: 86.45%;
    padding-left: 2.275%;
    padding-right: 2.275%;
          clear: none;
    float: none;
          margin-left: auto;
IN THE TABLET MEDIA QUERY SECTION
.gridContainer {
          width: 100%;
          padding-left: 0%;
          padding-right: 0%;
          clear: none;
          float: none;
          margin-left: auto;
#div1 {
#headerBar {
#headerWrapper {
          width: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
          clear: none;
    float: none;
    margin-left: auto;
#menuAnimationBar {
display: none;
#contentBar {
#contentWrapper {
          width: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
          clear: none;
    float: none;
    margin-left: auto;
#socialMediaBar {
#socialMediaWrapper {
          width: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
          clear: none;
    float: none;
    margin-left: auto;
#footerBar {
#footerWrapper {
          width: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
          clear: none;
    float: none;
    margin-left: auto;
#menuAnimationWrapper {
IN THE PC MEDIA QUERY SECTION
.gridContainer {
          width: 100%;
          max-width: 1920px;
          padding-left: 0%;
          padding-right: 0%;
          margin: auto;
          clear: none;
          float: none;
          margin-left: auto;
#headerBar {
#headerWrapper {
          width: 88.5%;
    max-width: 1232px;
    padding-left: 0.75%;
    padding-right: 0.75%;
    margin: auto;
    clear: none;
    float: none;
    margin-left: auto;
#menuAnimationBar {
          display: block;
#contentBar {
#contentWrapper {
          width: 88.5%;
    max-width: 1232px;
    padding-left: 0.75%;
    padding-right: 0.75%;
    margin: auto;
    clear: none;
    float: none;
    margin-left: auto;
#socialMediaBar {
#socialMediaWrapper {
          width: 88.5%;
    max-width: 1232px;
    padding-left: 0.75%;
    padding-right: 0.75%;
    margin: auto;
    clear: none;
    float: none;
    margin-left: auto;
#footerBar {
#footerWrapper {
          width: 88.5%;
    max-width: 1232px;
    padding-left: 0.75%;
    padding-right: 0.75%;
    margin: auto;
    clear: none;
    float: none;
    margin-left: auto;
#menuAnimationWrapper {
          width: 88.5%;
          height: 293px;
    max-width: 1232px;
    padding-left: 0.75%;
    padding-right: 0.75%;
    margin: auto;
          clear: none;
    float: none;
    margin-left: auto;

Cannot insert fieldset inside Fluid Grid div (Was: Please help)

Please help..I couldnot insert fieldset inside FG div.(I couldnot find the fieldset while viewing in the browser also.)

A <fieldset> is a <form> element.    Copy and paste this form code into a new, blank document. Save and preview in browsers.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Form with jQuery Validation</title>


<script src="http://code.jquery.com/jquery-latest.min.js">
</script>

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js">
</script>
<style>
/**BEGIN FORM STYLES**/
#contact {
font-size: 14px;
width:95%;
margin: 0 auto; /**adjust margins as needed**/
background: #FFF;
border: 2px groove #999;
padding: 2%;
#contact fieldset {
margin-bottom:5px;
background:#CCC;
#contact legend {
padding: 8px;
background: #000;
font-weight: bold;
color: #FFF;
line-height: 1.5;
/**wrap form lables and fields inside ordered lists for better web accessibility**/
#contact ol {
list-style:none;
margin:0;
padding:0}
#contact li {
padding:5px;
margin: 0;
clear: left;
#contact label{
display:inline-block;
float:left;
line-height: 23px; /**lines up labels with fields**/
width:15%;
font-size: 12px;
text-align:right;
margin-right: 10px; /*space between labels, fields*/
#contact textarea,
#contact input[type=text],
#contact input[type=email],
#contact input[type=number] {
width: 45%; /**same width on fields**/
padding: 5px;
color:#333;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
#contact select {width:47%}
/**field background on focus**/
#contact input:focus,
#contact input:active,
#contact textarea:focus,
#contact textarea:active,
#contact select:focus,
#contact select:active
{background-color: #FFC;}
#contact label.error {
    line-height:1.5;
    color:#F00;
    background:#FFC;
    padding:3px;
    box-shadow:1px 2px 3px #333
</style>
</head>
<body>
<p>Basic Contact Form</p>

<form id="contact" action="form-processing-script.php" method="post">
<fieldset>
<legend>Required Fields:</legend>
<ol>
<li><label for="first_name">Name:</label>
<input name="first_name" id="first_name" type="text" required placeholder="First"></li>
<li><label for="last_name">Last:</label>
<input name="last_name" id="last_name" type="text" required placeholder="Last"></li>
<li><label for="e_mail">E-mail:</label>
<input name="e_mail" id="e_mail" type="email" required placeholder="[email protected]"></li>
<li><label for="selectTest">Select One:</label>
<select name="selectTest" id="selectTest" size="4" required title="Please select something!">
<option value="1">Saab</option>
<option value="2">Audi</option>
<option value="3">Fiat</option>
<option value="4">BMW</option>
</select></li>
</ol>
</fieldset>
<fieldset>
<legend>Optional Fields:</legend>
<ol>
<li>
<label for="phone">Phone:</label>
<input name="phone" id="phone" type="number" placeholder="(area code) 123-4567" />
</li>
<li><label for="subject">Subject:</label>
<input name="subject" id="subject" type="text" />
</li>
<li><label for="message">Message:</label>
<textarea id="message" name="message" placeholder="remarks"></textarea>
</li>
<li><input name="submit" type="submit" value="Submit">
</li>
</ol>
</fieldset>
</form>


<script>
$(document).ready(function() {
    $("#contact").validate();
    $("#selectTest").validate();
</script>
</body>
</html>
Nancy O.

Trouble getting banner rotator control buttons to line up. Please help!

Hi guys,
I had some help making a banner rotator and it all works fine but I can't get the control buttons to line up with each other properly.
You can check my example by clicking here.
Basically the left and right control arrows should align with the lights. Does anyone know how I can get them to line up?
Thank you,
S

Spindrift wrote:
I tried what you said and it kind of worked but I more want to bring the <ul> up to the level of the arrows, rather than giving the arrows a top margin to bring them down, if that makes sense. I want the black box to be a thin strip.
Any other ideas?
Add margin: 0; to your 'banner-rotation ul' css selector (as shown below)
.banner-rotation ul {
    float: left;
    padding: 1px 0 0;
    width: 148px;
height:11px;
margin: 0;

How to setup a default size for new divs in fluid grid layout in dreamweaver?

Hi,
how to setup a default size for a new divs in fluid grid layout in dreamweaver? I don't need the default size for new divs as a 100% width, I need them 13.69% as a one coulmn width only (7 coulmns fluid grids layout for desktop size 1000w).
This problem I've faced when I intended to insert dozens of fluid grid divs in the layout.

Sorry, I don't believe that you have had a good look at the Foundation framework. I'll now hold your hand while we go through the basics.
Here is the specific page http://foundation.zurb.com/docs/components/grid.html
The default values are
Em-base : 16px
Row width: 62.5em (62.5em x 16px = 1000px)
Columns per row: 12
These and other default values can be changed. The fact of the matter is that if you stipulate a section width of 2 or 3 or 12 columns, the widths will automatically be calculated for you.
In your case, if you want 7 columns, all you need to do is change the number of columns per row and the rest is done for you.

Dw6 fluid grid layout

trying to make sense of the fluid grid layout.
can you use <div class> in fluid grid layout?
is it best to only insert divs using the fluid grid layout div?
when you insert a new fluid grid div what is the difference between entering a new line or not?
the html structure seems to be the same regardless of if you start a new line or not, am i wrong?
any help would be appreciated!

Ben Pleysier wrote:
It's not my code, just rubbish I pulled out of the Bootstrap example sites....plenty more like that........ how about this beauty:
<div class="spb-row-container spb-row-full-width spb_parallax_asset sf-parallax parallax-window-height parallax-fixed spb_content_element bg-type-cover col-sm-12 no-shadow hidden-xs remove-element-spacing col-natural" data-v-center="true" data-top-style="" data-bottom-style="" data-midnight="dark" style="background-color:#009fc2;margin-top:0px;margin-bottom:0px;background-image: url(http://www.thesign.pt/wp-content/uploads/2014/10/FM.jpg);">
I thought we were talking about Bootstrap. No Bootstrap in the above.
<body class="html not-front not-logged-in no-sidebars page-node page-node- page-node-1172 node-type-static-page not-mobile region-content navbar-is-fixed-top" onunload="">
No Bootstrap here either.
<div class="col-lg-3 col-md-4 col-md-offset-1 col-sm-4 col-sm-offset-1 col-xs-22 col-xs-offset-2 col-lg-offset-0">
Please allow me to explain. Bootstrap is based on 12 columns regardless of screen size. Translating the above we get the following for each of the screen sizes
large 3 cols offset 0
medium 4 cols offset 1
small 4 cols offset 1
extra small 22 cols offset 2
Our attention immediately falls on the extra small device with 22 columns that are 2 columns offset, total 24 columns. How can this be when there are only 12 columns available. Why would one have offset columns on the smallest screen size when we are already battling for real-estate. I think that if we make the classes believable we can safely ignore the classes for the extra small device. Continuing, we see the same number of columns for medium and small and the same offset. Being a mobile first approach, the classes that we assign to small will filter through to larger screen sizes making the classes for medium screen sizes ineffective. Looking at the 0 offset for large screen sizes?? Why do that when it is the default value. In other words, had Bootstrap been applied properly, the tag would look like
<div class="col-sm-4 col-sm-offset-1 col-lg-3">
The other two examples are even more ridiculous. Once again, I implore you to start learning Bootstrap and you will come to the conclusion that you are supplying us with gibberish.
I'm not supplying the gibberish it's the many websites that rely on frameworks, be they Bootstrap/Foundation/Wordpress - whatever rubbish they are using that I'm lifting this code from that are supplying it.
Take the Bootstrap form - every form input field I observe is wrapped in a <div> tag, why - it's bloated and redundant coding. Bootstrap, much like Wordpress was never invented to be used to build websites.
That IS my whole point - there are numerous examples of where Bootstrap IS NOT being used properly because people rely on something they no nothing about and end up with verbose class names splattered around all over their pages, bloated js and css scripts because they are the default files which come with Bootstrap.
<div class="col-sm-4 col-sm-offset-1 col-lg-3"> to me this is still nasty and overly complex 'class' mark-up. A page full of this tripe would drive me insane.
The very worst people you could advise to use Bootstrap are the people in this forum because most will have little knowledge of coding (that's why they turn to a framework) and end up with a page full of crap.
And I'm not verbalising you - you said it yourself. People use lots of 'short cuts' - it doesnt mean it's a good approach to take. No ones re-inventing the wheel apart from Bootstrap, who are obviously trying too. Media queries already exist to produce responsive design, learn how to implement them and free yourself from being entrapped by frameworks where you have to use their naming convention, their break points by default, their over bloated js and css files and somethimes rubbish html mark-up.

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/

Problem in Fluid Grid Layout

I am trying to edit an My existing html site with a fluid grid layout. My Layout toolbar doesn't show a fluid grid div widget, and when I go to the 'Insert:Layout' menu, the fluid grid option is also gone. It used to be there. How do I get it back? I'm dead in the water until I figure this out.

Screenshots don't tell us if your code is actually in a fluid grid layout. My guess is not which is why the icon is not displaying.
Nancy O.

DW version 12.2 Build 6006 fluid grids

There is no Fluid Grid DIV item from the INSERT/LAYOUT drop down menu in DW 12.2. I have to select DIV and then give it fluid container properties. Any modifications have to be done through the CSS properties panel since there are no DIV handles. My App Manager says this is the latest update. Any ideas?

I've just tested it in Dreamweaver CS6 (Version 12.2, build 6006). Although there is no option for Fluid Grid Layout Div Tag, just clicking Div produces the correct dialog box for a fluid grid div when you're working with a Fluid Grid Layout:
Clicking Div in an ordinary HTML page produces a different dialog box like this:
This brings CS6 more into line with the way Dreamweaver CC works. In CC, the Layout category of the Insert panel is context sensitive. When working with a Fluid Grid Layout, you're no longer limited to divs. All layout elements can be inserted as fluid elements. Try it with Header, Navigation, etc.

Fluid Grid guides not showing

Anyone else having trouble with getting fluid grid guides to show? I've tried all the obvious solutions... Also, anyone having touble getting the "View in Browser" button to work?

Start with this:
Deleting Corrupted Cache and/or Configuration folder in DW
http://forums.adobe.com/thread/494811
If that doesn't fix things, try this:
Restore Preferences
http://helpx.adobe.com/dreamweaver/kb/restore-preferences-dreamweaver-cs4-cs5.html
If that still doesn't fix things, you may need to do a clean re-install.
http://helpx.adobe.com/creative-suite/kb/cs5-cleaner-tool-installation-problems.html
Nancy O.

Fluid Grid Layout can´t be changed after opening .html file

Hey Community!
I´m working with DW CS6 for a few weeks now and I´m really happy about it!
But now I´ve got a Problem... I used google and this forum to find a solution to it, but didn´t find anything about it. (Sorry, if i was too stupid to search for the right keywords! )
I´ve created a new side with DW and wrote some html pages: All of them are fluid grid layouts and it worked all fine till today. Every page is seperated in an own folder including the "boilerplate.css" & the "respond.min" file, so the filetree looks like this (UPCASE = Folder):
ROOT:
     index.html
     boilerplate.css
     respond.min
     OFFERS:
          offers.hmtl
          boilerplate.css
          respond.min
     ALBUMS:
          albums.html
          boilerplate.css
          respond.min
and so on...
So today I wanted to open the .html files, to make some changes, add new fliud-grid-div-tags and add new content. The pages look still lik I left them (correct layout, old fluid-grid-div-tags still at the right position, everythings fine), but the collums of the fluid grid aren´t displayed anymore and I even can´t move the fluid-grid-div-tags anymore
In other words:
The collums are still there, but the fliud-grid-div-tags are no longer displayed green and editable in their position and size.
Did I do something wrong? Or is it maybe just a special Checkbox to click in DW to edit them (like I´m now in a wrong DW-view or something like that?)?
I hope you got a solution so I don´t have to rewrite all the pages again to be able to edit them!
Greetings from Germany,
David
PS: Screenshot

Hi Community,
I found the solution on my own in a video, where someone deactevaded those green fields...
So it´s solved
THX @ all

Creating fluid grid templates

I have a very large website for a real estate company that I sold as a RWD. They have 175 or so pages of listings.
I have a good handle on DW's fluid grid design tools. When a try to create a DIV inside an editable region the DIV loses it's fluent grid functionality like copy, hide, sizing etc.
Has anyone worked with templates and DW's fluid grid. Is there a way around this problem. Any help or suggestions would be appreciated.
Thanks

I set up a really simple site to demonstrate the issue.
This is an Editable Region with a fluid grid DIV inside the region. The highlighted DIV is a regular DIV.
This next screen shot is a fluid grid DIV outside of the Editable Region. It is performing as it should.
It would make our lives much simpler if we could use the Fluid Grid DIVs in a template for the 175 redundant pages of this site.

How Do I Put Pictures anywhere in fluid grid layout??

Hi,
I was wondering how you put pictures anywhere you want in fluid grid layout without having to use the fluid grid layout div tag. I find it easier to use the ap div and simply insert pictures and move them freely however when i do that they dont stay in the correct place and the other grids? Is there an easier way?

Sorry but APDiv tags don't work in Fluid Grid layouts. That's why Adobe removed them from CC.
You must use the Fluid Grid divs in your layout to hold your text and images.
<div class="gridContainer clearfix">
     <div class="div1">
          insert image here...
     </div>
     <div class="div2">
          insert image here...
     </div>
</div>
Nancy O.

Trouble getting Fluid Grid Div's to line-up

Similar Messages

Maybe you are looking for