Fixed position takes up more space than relative position with Susy?

Question

Hey guys I'm having some problems with fixed positioning in Susy and I'm hoping someone will help me out with my question here.

When I switched the position from static (the default option while using span columns), to fixed, the block with fixed position juts out of the width I gave it. Is there anyway to make sure the fixed positioned column stays the same size as the static one? (The problem is to the right, the left bleed is intentional)

Here's a link to a picture to better show what I'm asking.
http://www.zell-weekeat.com/wp-content/uploads/2013/08/question.jpg

This is what I currently have in my layout files: sidebar-primary is the red box whereas sidebar-secondary is the orange box.

.sidebar-primary {
    @include span-columns ( 4, 16 );
    text-align: right;
    background:red;
}

.sidebar-secondary {
    @include at-breakpoint($large) {
        @include span-columns ( 4, 16 );

        @include bleed ( 1 of 16, left );
        text-align: right;
        background: orange;
        position: fixed;
        // height: 100%;
    }
}

Thanks!

Answer 1

Relative widths are calculated in relation to their positioning contexts. Static and relative positioned elements are always within the context of their parent element. In contrast, absolute widths are calculated relative to the next non-static ancestor, and fixed widths are relative to the browser window (or "viewport").

Susy works by calculating widths relative to a container, and that does't work for fixed elements that have been removed from their expected flow. There is a clever workaround, if you can handle the extra markup. What you need to do is create a fixed context, then a container for Susy, and then perform your span-columns inside that fixed container:

// fixed context
.fixed-context {
  position: fixed;
  left: 0;
  right: 0;

  // container
  .container {
    @include container;

    // span-columns
    .sidebar {
      @include span-columns(4);
    }
  }
}

If you have a fixed-position container to work inside of, column-spans inside it will fall back into place.