Skip navigation
BackSHOOTER
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

915 Views   10 Replies   Latest reply: BackSHOOTER, Feb 14, 2013 5:35 PM
 
Replies
  • Ben Pleysier
    Currently Being Moderated
    1. Ben Pleysier,
    Feb 14, 2013 2:37 AM   in reply to BackSHOOTER
    Report

    please supply a link to your site

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    2. Nancy O.,
    Feb 14, 2013 9:20 AM   in reply to BackSHOOTER
    Report
    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:
  • FG Expert
    Currently Being Moderated
    3. FG Expert,
    Feb 14, 2013 9:55 AM   in reply to BackSHOOTER
    Report

    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:
  • Ken Binney
    Currently Being Moderated
    4. Ken Binney,
    Feb 14, 2013 10:01 AM   in reply to FG Expert
    Report

    Hi and welcome...

     

    Thanks for jumping in here.

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

    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:
  • Nancy O.
    Currently Being Moderated
    6. Nancy O.,
    Feb 14, 2013 10:13 AM   in reply to FG Expert
    Report

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

     

     

    Nancy O.

     
    |
    Mark as:
  • FG Expert
    Currently Being Moderated
    7. FG Expert,
    Feb 14, 2013 10:22 AM   in reply to Nancy O.
    Report

    Here is the link to latest updated on DW team blog:

    http://blogs.adobe.com/dreamweaver/2013/02/dreamweaver-creative-cloud- update-feb-2013.html

     
    |
    Mark as:
  • BackSHOOTER
    Currently Being Moderated
    8. BackSHOOTER,
    Feb 14, 2013 4:00 PM   in reply to BackSHOOTER
    Report

    Hey guys thanks for the quick responses.

    I did figure out just now that if I set the clear to both, right or left, it will remove whatever "gutter" was there holding it back from going straight up against the other div. Now the only problem I have is with making the middle picture line up correctly.

     

    I set the left picture to align with its right side and vice versa for the image on the right. However witht he picture in the middle it only lines up at a certain point while scaling down.

     

    Do you guys know how to make the picture maintain a specific width so that it will stay lined up while scaling the page down?

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

    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:
  • BackSHOOTER
    Currently Being Moderated
    10. BackSHOOTER,
    Feb 14, 2013 5:35 PM   in reply to BackSHOOTER
    Report

    Hello again,

    So after a few hours messing around I was able to solve my problem. I'll just tell you guys what I did incase anyone runs into the same problem I had in the future.

    After finding this I had that moment where I thought, how did I not think of this before?

     

    Basically if you look at the first image I posted above I had put 1 part of the dark line on the left image and the white line on the middle image. This caused a problem when the page was scaled around because the sides of the middle image would get chopped off and therefore I lost the indented look.

     

    To solve this I simply went back to Photoshop, took all the lines off the middle image, and then i put both lines on the left and the right images. Once I inserted the images into DW I had them align to the left edge( for right photo) and the right edge(for left photo). This made sure that even when the sides got "chopped" off as the page scaled, the indet would remain in place.

     

    Now my page is able to scale properly with the background image remaining in the correct place.

     

    In addition to "override" the gutters and remove that space I found I simply had to go into my CSS rules for each of those boxes and set the clear to Both, Left, or Right. This setting seemed to make it forget that the gutters were there and thus allowing my divs to go side by side.

     

    Thanks for all of the help you guys gave. It got me thinking and helped me find this solution.

     
    |
    Mark as:
Actions

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