Susy 2: Fixed width sidebar with fluid main content area

Using Susy 2 (release candidate), I'm trying to figure out how to create a simple fluid layout with a fixed width sidebar - either left position or right - I'm happy using the first and last keywords. Can anyone give me any pointers on how to do this within Susy 2?

Thank you!

There are a few ways to mix fixed/fluid layouts, depending on your own specific case.

1. Isolate the sidebar.

   Float isolation is a cool a way of keeping floats independent from each other.

   .side {
     @include span(3 static isolate);
   }
   
   .main {
     @include full;
     padding-left: span(3 static wide);
   }
   
   // or...
   
   .main {
     margin-left: span(3 static wide);
   }
   

   span(3 static) will span 3-columns, using your column-width setting/units. Adding isolate will set negative right margins, to keep it from taking horizontal space. Adding wide, will include an extra gutter in that width. You could also use arbitrary widths like 200px instead. It's up to you.

2. Remove the sidebar from the flow entirely.

   If it's safe to remove the sidebar from the flow, it is sometimes simplest to position it absolutely, and add equal padding to the main content. Using Susy 2, that could look something like this:

   .side {
     position: absolute;
     left: 0;
     top: 0;
     width: span(3 static);
   }
   
   .main {
     padding-left: span(3 static wide);
   }
   

3. Use a layout-context hack.

   There are also ways to create a new layout context that will fill the remaining space after a float. The simplest of those is overflow: hidden;

   .side {
     @include span(3 static);
   }
   
   .main {
     overflow: hidden;
   }
   

   The downside of that is if you need to overflow for any reason. There are other techniques, that have other hackey downsides, like this one:

   .main {
     display: table-cell;
     vertical-align: top;
     width: 10000px;
   }