Skip navigation
BackSHOOTER
Currently Being Moderated

How to override the gutter while using fluid grid layouts?

Feb 13, 2013 9:37 PM

Tags: #background #image #div #dreamweaver #cs6 #fluid_grid_layout

Hello,

My problem occurs when I try to take two of my divs within the fluid grid layout and make them so that they lie flush together. I have removed the left margin from the right side div and this makes the two divs side by side in the designer view. However when I take a look at the site in IE or Chrome there is still a gap between the div's where the gutter is at.

 

I'm not sure exactly what this technique is called but I am trying to get the look that it is beveled and it separates the columns. problem w divs.pngThe two areas where the circles are at are where I want the divs to be moved over to line up side by side with the other. It is suppose to look like this.

correct.png

 

As I mentioned earlier I am using the Fluid grid layout. I'm sure there has to be some way to be able to move the div's over. However I believe the problem may have to do with the divs being "locked" to the grids. I have tried removing the margin-left that divs had, this appeared to fix the problem in DW but it actually doesn't after I test it.

 

I am fairly new to DW but I have been able to pull this off thus far and this is the only problem that is holding me back from finishing up this site.

 

One other idea that i had was to just wrap the 3 content layers that i want to be together and to put them into a div that surrounds all 3, and set the background image of that main div to this image. The problem with that though is that as the page scales down the image gets cut off and then before you know it I don't have the look I want anymore. If there is a way to make the background image maintain its width and scale with the page, I think this might be an easier fix.

 

If anyone has any ideas as to how to fix this please let me know.

Thank you in advance

 
Replies
  • Currently Being Moderated
    Feb 14, 2013 2:37 AM   in reply to BackSHOOTER

    please supply a link to your site

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 14, 2013 9:20 AM   in reply to BackSHOOTER
    If there is a way to make the background image maintain its width and scale with the page, I think this might be an easier fix.

    Sure, use a CSS3 linear-gradient instead of background-images.

    http://www.colorzilla.com/gradient-editor/

     

    The FGL gutters are intrinsic.  You can't to get rid of them and have it look good in all devices.

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 14, 2013 9:55 AM   in reply to BackSHOOTER

    I think it can be achieved quiet simply by applying a zero margin class to all the divs/elements where you want no gutter space.

     

    .zeromargin {

    margin:0px;

    }

     

    Caution: apply it once you are done with all layouting.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 14, 2013 10:01 AM   in reply to FG Expert

    Hi and welcome...

     

    Thanks for jumping in here.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 14, 2013 10:09 AM   in reply to Ken Binney

    I have read in some blogs that updated Fluid grid feature in new subscription release is way more powerful than what we have now.

    Waiting eagerly

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 14, 2013 10:13 AM   in reply to FG Expert

    I hope so.  There's a lot of room for improvement. 

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 14, 2013 10:22 AM   in reply to Nancy O.
     
    |
    Mark as:
  • Currently Being Moderated
    Feb 14, 2013 4:37 PM   in reply to BackSHOOTER

    You will need to show us a link to your test page.  Upload page & support files to a web space you control and post the URL. 

     

    If you don't have permanent web hosting yet, many ISPs give you a free web space you could use (Earthlink, Verizon, AT&T, etc..).  Or, sign-up for a free hosting account for testing purposes at http://www.000webhost.com/

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (1)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points