Search code examples
susy

Susy Pull Div Gutter Amount?

Im stumped as to how to pull a div back in the amount of a gutter. I have 12 columns with two divs. I have a Left div and a right div. The bottom portion of the screenshot is what I would like to achieve, however, I am not sure if my solution is correct and feasible to do.

Currently I have the div sitting at the 4 pos which produces the top portion of the image. I have the red arrow indicating where I would like the div to sit. Below that is the desired affect for reference.

.right {
    @include span(9 at 4 of 12);
}

enter image description here

the output of the sass produces this: 

.right {
    width: 74.57627%;
    float: right;
}

I can knockout the float and give it a negative margin-left to line it up but is there another function that i can use and does this mess with the susy???

Many thanks!!

Solution

  • This is a good case for using the spread option in Susy. Spread allows you to say how much a span should overflow adjacent gutters. The default is narrow, which doesn't overflow any gutters. In this case you want wide, to overflow a single gutter. (There is also wider if you need to overflow gutters on both sides)

    .right {
    @include span(9 wide at 4 of 12);
}

    (you can actually add that keyword anywhere in the list of arguments - I just like how this reads)