Problems with margins and borders in a fluid grid layout

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

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

Similar Messages

Fluid grid layout lost when closing and reopening Dreamweaver

I am working on fluid grid layout in dreamweaver cc. I created a new dreamweaver site, created a fluid grid layout page and everything looked and worked as it should. I closed out of dreamweaver and when I reopened it, I could no longer see the fluid grid layout or the fluid grid handles on any of the divs. I also no longer had the little button in the toolbar next to the live button either, to toggle the fluid layout on and off. I did not move the css or js from where dreamweaver originally stored them.
Also checked the content and code of my files, everything looks as it should:
The fluid grid layout style sheet IS attached to the page.
The Fluid Grid Properties near the top of the style sheet ARE still there.
I have tried several test sites and as soon as I close DW and reopen it, the fluid grid layout button is gone, as is are the visual aids. I uninstalled and reinstalled dreamweaver to no avail.
Very frustrating!
ANY help would be greatly appreciated!

Hi,
Thank you for all the responses. When I was doing the testing, I didn't touch any of the style sheets. I just created a new site, created a new FGL page, saved everything, then closed out. When I reopened, the FGL elements were not there. So in taking Ken's suggestion, I was getting ready to upload the files to see if anyone could see what I was doing wrong. I had named the file test.html so I did a 'save as', to save it as index.html to make it easier. Then a strange thing happened. The new 'index.html' page came in with the FGL elements! When I looked at the test.html, they still were not there. In doing additional testing, when I open the first file, whether test.html or index.html, no FGL functions are available, when I open the second one, again no matter whether test.html or index.html, they are. Getting ready to throw my hands up... I uploaded everything to:
http://www.ComputerSecurity.com/fgltest/
Directly under there is the css file called fgltest.css, along with the boilerplate.css, respond.min.js, index,html, and test.html.
Don't know what is going on. I am new to fluid grid layouts, but not to dreamweaver, have been using it for years. Unless someone can see something that I cannot, seems like the only way I can create a Fluid grid layout based on this new information, is to open one page and work on another...

How To Center Fluid Grid Layout Div Tag

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

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

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

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

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

Need help with Fluid Grid Layout and variable column balance.

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

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

Fluid grid layout problem in IE and Firefox

I just got DW CS6 and decided to try the fluid grid layout. This is my first try at doing it. I have 12 grid columns with 3 divs across the page. Each div spans 4 columns. In Opera, Safari and Chrome, everything works fine. However, in IE and Firefox, the div on the right side of the page drops down under the left div (the middle one and the left one stay where they belong). How do I fix this? The page is still a work in progress (obviously), but the url is http://www.brucebarrdesign.com/index_fluid.htm
Thanks

Hi
I've only just upgraded to CS6 so not tried the feature myself yet, but I like fluid layouts so will be. The three colums all have the css style attributes: width: 32.2033%; and margin-left: 1.6949%; in fluid_layout.css (1st colmn has a margin of 0).
Now I don't know how familiar you are with web coding and this isn't the place to try to tutor you in it. The number of digits after the decimal tells me you've let DW assign these % entirely by itself without any guidance. Those measurements all add up a bit tight, to me, to 100% (I've not done the maths). I always allow a little leeway for the difference in the way the browsers calculate things - not so it's visually disturbing - but precisely to avoid this very problem. I'd round the figures down manually in the css styles dialogues or by editing the stylesheet directly.
width: 32%; and margin-left: 1.5%; checking the maths so I'd know how much % leeway that leaves.
Like I said I've not used this feature myself yet so I don't know if there is somewhere to tell DW to round numbers down itself.
Hope this helps.

Problem with IE and pubblishedIntoWall

Hi to all,
   i have a problem with InternetExplorer and CallBack
In my flex code i have :
flash.external.ExternalInterface.addCallback("pubblishedIntoWall", pubblishedIntoWall);
The javascript code:
function pubblishedIntoWallCarrello() {
        document.getElementById("composer").pubblishedIntoWall(1)
In both Firefox and Chrome the javascript works in the right way.
In internet explorer the function pubblishedIntoWall is not called.
Have some one got an idea of this problem?
Thanks for your time

First of all, thank for your reply
This is the code that i use in the HTML, i use   allowScriptAccess = sameDomain
----------- CODE -------------------
<div id="divContainercomposer" style="position:absolute;left:50%;top:0px;width:930;height:100%;margin-left:-465px">
            <script language="JavaScript" type="text/javascript">
            
            </script>
            <noscript>
                  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
                        id="flashContent" width="930" height="100%"
                        codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
                        <param name="movie" value="composer.swf" />
                        <param name="quality" value="high" />
                        <param name="bgcolor" value="#ffffff" />
                        <param name="allowScriptAccess" value="sameDomain" />
                        <embed src="composer.swf" quality="high" bgcolor="#ffffff" id="composer"
                            width="930" height="100%" name="composer" align="middle"
                            play="true"
                            loop="false"
                            quality="high"
                           allowScriptAccess="sameDomain"
                            type="application/x-shockwave-flash"
                            pluginspage="http://www.adobe.com/go/getflashplayer">
                        </embed>
                </object>
            </noscript>
</div>

Problem with JRE and Yahoo applets

Hi, I couldn't find any answer for this anywhere else...
Whenever I try to play a Yahoo game, certain windows will "shake". For example, if I log into yahoo, then go to play their spades game, the applet will load without any problem. The game room will appear and everything seems to be fine. But if I click on the Start Panel, the borders of the Start menu will "shake" If I right click on anything, that menu will also shake. This only occurs while JRE is running the yahoo applet. Once I leave the yahoo game, everything returns to normal. If I use IE and MSVM, this problem does not occur. This problem does not seem to occur with other instances of Java either. Only Yahoo games. I tried searching Yahoo for an answer to this, but didn't find anything. When I tried getting help from them, they replied with an email to update Java and/or my browsers. Well, I am using version 1.4.2_04 of java, and have IE6 updated as of today. Also, I am using Opera version 7.54 and Firefox 0.93. This problem with Java and Yahoo occurs no matter which browser I am using. The only way to keep this from happening seems to be to use IE with MSVM. Any ideas?

That page does apply. Everything that you have written indicates conclusively that the Yahoo game you're playing is the source of the problem. The fact that it works with the MS jvm but not with the Sun jvm, that the Sun jvm works with other Java applets, etc all say the same thing - that Yahoo applets wer/are coded to work with the MS jvm, which uses MS extensions in violation of the Sun/MS licensing agreements. The statement at the bottom of the page is proof positive - your spades game is not listed by Yahoo as being fixed.
"07/17/03 - From Yahoo! Customer Care:
We have deployed a fix for the incompatibilities with the Sun JVM� in the following games:
Chess Gin Cribbage Euchre Bridge
Hearts Toki Toki Boom Graffiti Pool
We plan to upgrade the rest of the games on an ongoing basis. "
The Yahoo applet is the problem and requires repair...

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

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

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

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.

Problem with JFrame and busy/wait Cursor

Hi -- I'm trying to set a JFrame's cursor to be the busy cursor,
for the duration of some operation (usually just a few seconds).
I can get it to work in some situations, but not others.
Timing does seem to be an issue.
There are thousands of posts on the BugParade, but
in general Sun indicates this is not a bug. I just need
a work-around.
I've written a test program below to demonstrate the problem.
I have the problem on Solaris, running with both J2SE 1.3 and 1.4.
I have not tested on Windows yet.
When you run the following code, three JFrames will be opened,
each with the same 5 buttons. The first "F1" listens to its own
buttons, and works fine. The other two (F2 and F3) listen
to each other's buttons.
The "BUSY" button simply sets the cursor on its listener
to the busy cursor. The "DONE" button sets it to the
default cursor. These work fine.
The "SLEEP" button sets the cursor, sleeps for 3 seconds,
and sets it back. This does not work.
The "INVOKE LATER" button does the same thing,
except is uses invokeLater to sleep and set the
cursor back. This also does not work.
The "DELAY" button sleeps for 3 seconds (giving you
time to move the mouse into the other (listerner's)
window, and then it behaves just like the "SLEEP"
button. This works.
Any ideas would be appreciated, thanks.
-J
import java.awt.BorderLayout;
import java.awt.Cursor;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
public class BusyFrameTest implements ActionListener
private static Cursor busy = Cursor.getPredefinedCursor (Cursor.WAIT_CURSOR);
private static Cursor done = Cursor.getDefaultCursor();
JFrame frame;
JButton[] buttons;
public BusyFrameTest (String title)
frame = new JFrame (title);
buttons = new JButton[5];
buttons[0] = new JButton ("BUSY");
buttons[1] = new JButton ("DONE");
buttons[2] = new JButton ("SLEEP");
buttons[3] = new JButton ("INVOKE LATER");
buttons[4] = new JButton ("DELAY");
JPanel buttonPanel = new JPanel();
for (int i = 0; i < buttons.length; i++)
buttonPanel.add (buttons);
frame.getContentPane().add (buttonPanel);
frame.pack();
frame.setVisible (true);
public void addListeners (ActionListener listener)
for (int i = 0; i < buttons.length; i++)
buttons[i].addActionListener (listener);
public void actionPerformed (ActionEvent e)
System.out.print (frame.getTitle() + ": " + e.getActionCommand());
if (e.getActionCommand().equals ("BUSY"))
frame.setCursor (busy);
else if (e.getActionCommand().equals ("DONE"))
frame.setCursor (done);
else if (e.getActionCommand().equals ("SLEEP"))
frame.setCursor (busy);
try { Thread.sleep (3000); } catch (Exception ex) { }
frame.setCursor (done);
System.out.print (" finished");
else if (e.getActionCommand().equals ("INVOKE LATER"))
frame.setCursor (busy);
SwingUtilities.invokeLater (thread);
else if (e.getActionCommand().equals ("DELAY"))
try { Thread.sleep (3000); } catch (Exception ex) { }
frame.setCursor (busy);
try { Thread.sleep (3000); } catch (Exception ex) { }
frame.setCursor (done);
System.out.print (" finished");
System.out.println();
Runnable thread = new Runnable()
public void run()
try { Thread.sleep (3000); } catch (Exception ex) { }
frame.setCursor (done);
System.out.println (" finished");
public static void main (String[] args)
BusyFrameTest f1 = new BusyFrameTest ("F1");
f1.addListeners (f1);
BusyFrameTest f2 = new BusyFrameTest ("F2");
BusyFrameTest f3 = new BusyFrameTest ("F3");
f2.addListeners (f3); // 2 listens to 3
f3.addListeners (f2); // 3 listens to 2

I've had the same problems with cursors and repaints in a swing application, and I was thinking of if I could use invokeLater, but I never got that far with it.
I still believe you would need a thread for the time consuming task, and that invokeLater is something you only need to use in a thread different from the event thread.

Problem with installing and running some applications or drivers

When installing and installing some items, towards the end of the installation I get this message:
/System/Library/Extensions/comcy_driver_USBDevice.kext
*was installed improperly and cannot be used. Please try reinstalling it or contact product's vendor for update*
The end result is that some things do not seem to work properly, such as my HP printer. Would anybody have any ideas on how to fix this problem?

Thank you for your response. Originally, I had a problem with Airport and ended up reinstalling Snow Leopard. Since then, when downloading upgrades etc, such as HP printer drivers, iTunes etc., towards the end of the download when its running the script, I get this message: /System/Library/Extensions/comcy_driver_USBDevice.kext
+was installed improperly and cannot be used. Please try reinstalling it or contact product's vendor for update+
Sometimes, the download hangs and is unable to complete. The main problem I've encountered so far with an application is when I use the printer to scan an image via Preview, it's blank: there's nothing there.

Problems with outlook and address book contacts: my outlook contacts had around 3,000 entries. Outlook duplicated by itself and now outlook and address book have each over 340,000. What should I do?

Problems with outlook and address book contacts: my outlook contacts had around 3,000 entries. Outlook duplicated entries and have now 340,000. I reinstalled microsoft office and, thus, outlook, and reinstalled mac OS X system and applications. While I managed to delete outlook contacts so that I can re-sync with my blackberry, the contacts at Mac Address Book were not deleted and still have over 340,000 entries. I do not mind deleting all contacts since I have back up, but I have not been able to delete them. Also, when I go at Address Book and try to delete or merge duplicated entries, the system takes forever and never ends because of such large amount of entries. Worse, when I do so I run out of RAM memory.
My Macbook pro is just 2 months old.
What should I do? Is there a way to delete my Mac Address Book without having the problem above?
Many thanks
Regis

zlatan24 wrote:
For solving out troubles connected with corrupted or lost address book you may use address book recovery. It owns various features such as restoring wab files, it working under any Windows OS. The utility has modern and easy to use interface due to almost every experienced users.
If it is a windows problem it's not going to run on the OP's MacBook Pro

Problems with Safari and Firefox (HTTP?)

Problems with Safari and Firefox (HTTP?)
On a laptop G4, 10.5.8 and Safari 5.02 I experience the following:
On the account of my oldest daughter everything works fine, i.e. wireless internet works and no problems with mail or safari.
On the same laptop, on the account of my other daughter, the wireless is OK, she can mail etc. But safari nor firefox works. It says: can’t find server (whatever site) and in the activity window it looks if safari tries to open files (in the safari preferences-folder) in stead of http. Same applies to Firefox, so maybe it has more to do with HTTP in general?
What goes wrong? What to do? I tried the following on the host terminal (tips from Apple)
defaults write com.apple.safari WebKitDNSPrefetchingEnabled -boolean false
and
defaults delete com.apple.safari WebKitDNSPrefetchingEnabled
but that did not help,
Nanne

I'm still wondering why it happens now at this moment in time...
PC does seem to be a bit odd & inconsistent, the few times I've tested with it, at least so far as we content filtering goes; and if I remember rightly, you're not the first to report previously ok settings suddenly preventing some or all internet until pc is switched off altogether.
It may work when re-enabled

Haven't been able to use pages for a while. Keep getting following message. Have tried reinstalling iWork, but no luck. Same problems with Keynote and Numbers/Users/scottmcdonald/Desktop/Screen Shot 2012-03-14 at 9.39.52 PM.png

Haven't been able to use pages for a while. Keep getting following message. Have tried reinstalling iWork, but no luck. Same problems with Keynote and Numbers/

Have you moved Pages from its installed location? Or just dragged a copy to your current system?
It can't find some of its resources apparently.
Peter

Problems with margins and borders in a fluid grid layout

Similar Messages

Maybe you are looking for