Dreamweaver CC fluid grid divs do not stretch to cover 100% of the screen

Hello

I do another sensible provision using DW CC and I came across a problem.

Design colored divs that spans the entire page to 100% with a background color and borders.

I already did the design upwards as a layout width fixed to get the color codes etc. and that works well, with colors that covers the screen.

Now, I'm putiing design in DW CC using checkerboard to fluid and there is a white border on the Web site.

I can't work on how to get rid of this. Here are excerpts from my two lots of CSS stylesheets, one for a presentation grid fixed and one for a structure reactive

CSS FIXED WIDTH

body, td, th {}

do-family: Calibri;

do-size: 14px;

Color: #000;

}

{body

left margin: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

* / The wrapper header spans the entire screen no matter what 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;

left margin: auto;

border-bottom-width: 2px;

border-bottom-style: solid;

border-bottom-color: #BDDB6D;

}

FLUID GRID CSS

The fluid layout grid CSS has the following in it:

{.fluid}

Clear: both;

left margin: 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}

left margin: auto;

margin-right: auto;

Width: 86,45%;

padding-left: 2,275%;

padding-right: 2,275%;

Clear: none;

float: none;

}

{#div1}

}

* / This header wrapper extends through the presentation of the grid 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 add to the fluid grid layout to make the headerWrapper div span the screen, no matter what width?

What should I put in the grid CSS transmissions so that he can do that?

Thanks in advance!

I did it! I can't believe. The code I used is followed. The bar divs set color and at the border through the entire page and the wrapper divs to contain content in the various bars across the page.

I must say that DW CC fluid grids are much more stable to work with and it can take a lot of coding by hand now. This is a great improvement on when I tried to use grids of fluid on a project last year.

IN THE SECTION MULTIMEDIA PHONE REQUEST

{.gridContainer}

left margin: 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;

left margin: 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;

left margin: 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-bottom-color: #BDDB6D;

border-bottom-color: #BDDB6D;

}

{#socialMediaWrapper}

color: #FFF;

Width: 86,45%;

padding-left: 2,275%;

padding-right: 2,275%;

Clear: none;

float: none;

left margin: 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;

left margin: auto;

}

IN THE MULTIMEDIA TABLET QUERY SECTION

{.gridContainer}

Width: 100%;

padding-left: 0%;

padding-right: 0%;

Clear: none;

float: none;

left margin: auto;

}

{#div1}

}

{#headerBar}

}

{#headerWrapper}

Width: 90.675%;

padding-left: 1.1625%;

padding-right: 1.1625%;

Clear: none;

float: none;

left margin: auto;

}

{#menuAnimationBar}

display: none;

}

{#contentBar}

}

{#contentWrapper}

Width: 90.675%;

padding-left: 1.1625%;

padding-right: 1.1625%;

Clear: none;

float: none;

left margin: auto;

}

{#socialMediaBar}

}

{#socialMediaWrapper}

Width: 90.675%;

padding-left: 1.1625%;

padding-right: 1.1625%;

Clear: none;

float: none;

left margin: auto;

}

{#footerBar}

}

{#footerWrapper}

Width: 90.675%;

padding-left: 1.1625%;

padding-right: 1.1625%;

Clear: none;

float: none;

left margin: 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;

left margin: auto;

}

{#headerBar}

}

{#headerWrapper}

Width: 88.5%;

Max-width: 1232px;

padding-left: 0.75%;

padding-right: 0.75%;

margin: auto;

Clear: none;

float: none;

left margin: 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;

left margin: auto;

}

{#socialMediaBar}

}

{#socialMediaWrapper}

Width: 88.5%;

Max-width: 1232px;

padding-left: 0.75%;

padding-right: 0.75%;

margin: auto;

Clear: none;

float: none;

left margin: auto;

}

{#footerBar}

}

{#footerWrapper}

Width: 88.5%;

Max-width: 1232px;

padding-left: 0.75%;

padding-right: 0.75%;

margin: auto;

Clear: none;

float: none;

left margin: auto;

}

{#menuAnimationWrapper}

Width: 88.5%;

height: 293px;

Max-width: 1232px;

padding-left: 0.75%;

padding-right: 0.75%;

margin: auto;

Clear: none;

float: none;

left margin: auto;

}

Tags: Dreamweaver

Similar Questions

  • Divs in fluid grid div suddenly not left-align, right-most on each line travel down again

    Hey everyone, I need help! Last night my site worked perfectly well, and somewhere along the way, I made a change so that I can 't understand. There are all the divs on my site, the first two of the three are always aligned horizontally, but the third and last div is pushed back down again once. What baffles me the most, is that it is somehow changed on every page of my site, not just one, I'm working on. Could someone tell what could have caused it? As well, it seems still exactly how I want it to look mode live view, but as soon as I load in a browser, it is inconsistent, and I tried it in all major browsers with the same result. The body of the pages seems to be fine, it's only the divs that are crazy. I'm sure it's to have something to do with changing margins, but I don't know what part needs to be changed or what to put too exactly.

    King Karl wrote:

    What baffles me the most, is that it is somehow changed on every page of my site, not just one, I'm working on.

    Karl, this is expected behavior when you use a remote CSS style sheet that is linked to all of your HTML pages. While you can have your attention on an HTML page, any changes you make to the CSS will apply immediately to all pages using this CSS stylesheet.

    In rare cases where you want to apply a PAGE only FOR ONE single CSS rule, Insert rule in a style block in the head section of this page only, or you can even use a style inline on the unique element.

  • Reflow of edge - first div 100% of the screen

    Hello, is it possible to create a model like this site: https://www.uber.com/ with a first DIV still at 100% of the screen and the other DIV below?
    Thank you

    Yes! Just to make the width of 100% of div and set the height that you want. I hope this helps!

  • layout and fluid grid div tags

    so now, I start my journey of learning the layout feature fluid grid dw6.  just started and have already fallen on a problem. When to create a div, I prefer to give them a width and height seems just to help put on the page, but in fgl when I put the value for these it just seem to ignore it, is this true?  If so, how does this work?

    Hello

    The idea of using a fluid grid presentation is that the size of the div elements will adjust themselves based on the width different screen sizes.

    It is difficult to say without seeing your design/layout that you work to say whether or not you should actually try to set the fixed width and height for your div elements fixed width setting is fine if you are designing a traditional presentation, fixed width, it can help you to read this article on the differences between fixed vs fluid layouts http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-r ight-one-for-you /

    Since you mention that you are just starting to work with fluid grid, maybe check out Adobe TV can help you get started...

    Alassane http://TV.adobe.com/watch/Learn-Dreamweaver-CC/Create-Fluid-Responsive-Web-pages-in-dreamw.

    Good luck!

  • Tools are lacking in Design view in dreamweaver cc-fluid grid

    I have Dreamweaver cc and I changed the code in the cs so I can see the live view and design view in the transmission grid. Now, the tool is missing where you can put something in the trash and adding an additional division attached is

    a screenshot of what I'm trying to see... This attached image shows Dreamweaver with on cs cs changed to see live... The reason why I changed the cs should be able to edit the site in design, because you cannot change mode live view and editing can only be done in the code. Help, please!

    ToolMissing.jpg

    Work around the rear Design view disables fluid network tools because to back Design, you're trick DW into thinking that you are not using a GFL.

    If you really need these tools, go back to DW CC 2014.0 where Design and Live work always well with the FGL. 2014.0 is not available through the 'Previous Versions' of the CC desktop application, then you need to use direct links...

    Windows: http://download.adobe.com/pub/adobe/dreamweaver/win/cc/Dreamweaver_14_LS20.exe

    Mac: http://download.adobe.com/pub/adobe/dreamweaver/mac/cc/Dreamweaver_14_LS20.dmg

  • fluid grid tools do not work after that I moved a page to a new Directory/site

    I implemented a simple enough fluid grid, which works great.  Then I moved the files to a new directory.  I had to remove a slash in front of one of the links to the css file I use for formatting of the text and what not, but the page still works fine.  My problem is that I now have a plus a few changes, but when I click on the divs etc in design mode, I don't see more fluid grid tools or the little icon in the toolbar to turn it on or off.

    My apologies if I forget something obvious, but any suggestions would be appreciated.

    Thank you

    PRH

    It's working now.  It seems that the problem was related to a couple unrelated files css fg left by a previous attempt.  I cleaned these, and voila, my tools returned fg.

    Thanks for your help.

  • Dreamweaver CS6 - fluid grid content

    Hello

    I use the fluid grid layout system and I wonder if it is possible to Exchange content when you switch from layout of desktop/tablet smartphone page layout. I know that you have a different CSS for each screensize but I want pictures of smartphone to be smaller files so it downloads faster, I know that the images are resized automatically, but the file size remains the same. Is it possible within dreamweaver or what I need to use a custom code for this?

    Kind regards

    Ransom of Mitchell

    With programming server side, you can dynamically fill the pages based on device-width, or user-agent.

    Nancy O.

  • Mobile watch G3 using and using firefox. The fonts are not reinvest/wraping to adapt to the screen while increasing fonts.

    I use hand G3 mobile with android in browser firefox web. Fonts are reinvesting / wraping to adapt to the screen while increasing the size of the font. The same functionality was available when I am using mobile watch E3. But I think that's not mobile dependent feature. I'm missing a few settings.

    reflow on zooming option can be disabled. Try to toggle this option.

    1. In the address bar, type Subject: config and press enter. The subject: config "this might void your warranty!" warning page may appear.
    2. Click on I'll be careful, I promise!, to continue on the subject: config page.
    3. Search browser.zoom.reflowonzoom
  • Tecra 8100 - does not start and no activity on the screen

    Hello

    My Tecra 8100 not start or take me to the BIOS Setup. It lights up, swirls the hard drive, but there is no activity on the display. The only way I can get something on the screen is turning with the F12 key when I get the 'ready for the update of the BIOS. Place the BIOS update diskette in the drive "... message. So I tried the traditional method of updating the BIOS, found on the Toshiba site, but nothing helped. The machine seems to read the disk (that contains the downloaded BIOS) but does nothing. It is just there for centuries, with the disk light.

    The last two days I have trawled thro much views and even took the whole machine goes to check the connections loose, but I found no answer yet.

    Can someone out there please help?

    Thank you very much

    Hello Rory

    I did the BIOS to be updated several times, but I've never seen this message at startup upward. You did it the traditional method as described in the document which you will find under http://eu.computers.toshiba-europe.com/cgi-bin/ToshibaCSG/faq.jsp?z=234&service=EU&from=faq_selection&CFID=B IOS & FID = TRO0000000b07?

  • ThinkPad T400 does not start, is turn on below the screen & turning HDD switch off in a loop

    I put my Thinkpad T400 hibernation, but the next morning I couldn't start. When I press the power button, the lights under the screen turn on and I hear the sound of the hard drive and get it out. I don't even see anything on the screen. It is only black. The process continues to repeat in a loop, except if I press the power button to turn off.

    I tried the static load, remove the thing.

    I also removed the hard drive, put it back again, but not working anymore.

    Help, please.

    Solved the problem myself.

    Removed the internal battery and reinstalled after 30 s.

    It worked perfectly. Typing of him now.

  • System Restore does not work and vista freezes for the screen of microsoft corporation. I can not load even safe mode

    Hello

    A few days ago my laptop started to freeze. I noticed that the system recovery tool did not work either and now it's even worse. When I turn on my laptop

    It goes back to a black screen and the freezer. I tried the recovery since the start of the loading system, but it just says loading files and changes to the screen of microsorf corporation and still works.

    Sometimes when booting, it would say that the laptop was turned hard and give 2 options to start the computer normally or start recovery performance. When I press any button, the laptop freezes and must be activated manually.

    Any help would be greatly appreciated

    Hello

    1. don't you make changes to the computer before the show?

    Please follow the steps below.

    Method 1:

    Disconnect any external devices (except the keyboard, mouse and monitor) connected to the computer.

    Try to perform the last good known Configuration.

    http://Windows.Microsoft.com/en-us/Windows-Vista/using-last-known-good-configuration

    Method 2:

    Follow the steps from the link below.

    http://Windows.Microsoft.com/en-us/Windows-Vista/what-to-do-if-Windows-wont-start-correctly

  • BlackBerry Storm 9500 Smartphone - phone don't read do not my SIM after having replaced the screen (vodafone PAYG).

    I recently replaced the screen on my Storm 9500, ensuring that the screen I bought was an exact match, paying special attention to the color of the flex cable and all the serial numbers. After turning on at the end of the replacement of the phone work as usual, all the menus and functions are in perfect working condition. The only problem I have is the phone is not reading the sim card there is now a message at the top of the screen that reads "insert sim card". The upper right corner of the screen indicates "SOS". I tried to give the SIM to a clean place and also tried another card sim vodafone with the same result. I thought that maybe the new screen needs to be reconfigured or something. Anyone have any ideas?

    Thank you very much

    Gary...

    Hello

    Tried the biggest pieces of paper and it worked a treat, thank you very much for your advice, it was very appreciated!

    Thank you very much

    Gary

  • "Apps are not work - this application cannot open, the screen resolution is too low for this app run to change your screen resolution.

    Origignal title: Apps does not work.

    I got Windows 7 Starter I have upgraded to Windows 8 Pro on my mini HP laptop, but when I select no matter what application I get the following message

    "This application cannot open.

    The screen resolution is too low for this app run

    Change your screen resolution.

    and when I press 'Edit your screen resolution' I found the screen resolution is the maximum 1024 x 600.

    Under him, I found the following warning "" your resolution is less than 1024 x 768 elements could not fit and applications could not open

    Please advise?

    I know this is an old thread, but I came across it looking for a solution to the same problem. It turns out that my problem has a cause simple and simple solution. I had accidentally pressed the "multiple displays" function key on my keyboard (F4 on my HP Envy) and therefore affect my screen out of two monitors without realizing it. I started getting the error "the screen resolution is too low for this application to run", came here, tried to change my resolution screen and then realized what I had done. Once I changed the key function to the PC only, the problem has been resolved.

  • My fluid grid divs are slightly to the right and not centered

    I use CS6 and grids of fluid to make my mobile friendly Web site. The problem I have is that, for some reason, some of my divs (the ones I check to start on a new line) are off-center and appear to be too far to the right. But the one I unchecked to start on a new line so that it snaps up next to the one above when displayed on a shelf or desktop version is perfectly centered. I've looked everywhere and I can't find why it's happening. Here is a screenshot of the problem. You will see the second image with (about Writeaholics div), is centered. If anyone knows what's the problem and has a solution I would be eternally grateful. Thank you.

    Screen Shot 2015-04-28 at 8.57.49 am.pngScreen Shot 2015-04-28 at 9.12.09 am.png

    I removed the padding and everything is fine

    #header {}

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    background-color: #ffdf80;

    / * padding-left: 5px; * /

    / * right padding: 5px; * /

    margin: 0 auto;

    }

  • 2015 Dreamweaver has fluid grid of basic step by step tutorials

    Hi, now I have the 2015 version waiting Train Simple to produce tutorials for beginners on how to use bootstrap.

    I am told that the new tutorials to be released in July.

    Until that happens, I have to use Dreamweaver 2014 which Train Simple covers so well.

    I hope that their tutorials for 2015 following the same easy-to-follow format.

    I tried you are looking for tutorials on You Tube but it seems that it is too early, or suffer very poor examples out there.

    So far, as a graphic designer, I realized sites for some clients using Muse but I don't want to offer sites that are' Mobile friendly 'and '.

    That's why I made the decision to learn coding.  I felt that I was doing so well until 2015 has hit the street!

    You cannot use bootstrap without knowing the code. It's just not possible.  Bootstrap contains a boat load of CSS classes integrated which allows you to create everything from page layouts grid adapted menus, tabbed panels, forms, buttons, etc...  Without knowledge in-depth code and more specifically, startup code, you won't get beyond step 2 with it.

    Best advice: set aside the DW tutorials and spend a week doing anything other than HTML and CSS code exercises.  In the long run, this will help you more than any single DW tutorial.

    http://www.html.NET/

    http://w3schools.com/

    http://www.csstutorial.NET/

    http://phrogz.NET/CSS/HowToDevelopWithCSS.html

    http://webdesign.tutsplus.com/sessions/Web-design-theory/

    After understand more about code bases, go you back and the Bootstrap tutorials and see if they make more sense for you.

    Bootstrap 3 tutorial

    Nancy O.

Maybe you are looking for

  • How to open the bookmark in a new tab without switching to it

    Whenever I open any bookmark in a new tab, it becomes the "tab". Y at - it an addon which changes so I can open multiple bookmarks in new tabs whithout my current tab of switching? Thank you!

  • Register to install the extension for FireFox 24

    Hi, I want to automatically deploy a FireFox extension to a box via the Windows registry. Before 23 of FireFox, I use the steps in https://developer.mozilla.org/en-US/docs/Adding_Extensions_using_the_Windows_Registry to add an extension. I have deplo

  • HP d2545: Please help

    Hi can some teach me how to print photos using hp2545b? ESP. 4 X 6 size... pls thank you

  • Windows update web page does not load

    It loads this 72.14.205.100 then said that it can not display the page is not automatically updated or the other I tried to clear browser, disable updates, change software distribution / download to download.old all ideas

  • Cluster 2 nodi + batteria Hdd-3XNSB2J (8565682699)

    Seguito ad a software problem abbiamo la auswechseln uno dei 2 Nodi del Cluster, ora pero non riusciamo a farlo riconoscere dalla batteria di HDD connessa in Fibra Ottica. Few need di UN supporto tecnico. Grazie Francesco Falcone - Assistenza Tecnica