Susy 2: Fixed width sidebar with fluid main conten

Question

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!

Answer 1

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;
   }
   

Answer 2

You don't need Susy for the overall layout with the fixed sidebar. You can use Susy for fluid layout inside your main content area (which would be your "container"), but for the overall layout, you can simply use plain SCSS (even CSS but then you have to repeat the width instead of keeping a variable):

$side-bar-width: 250px; // whatever width you want

.side {
    float: left;
    width: $side-bar-width;
}

.main {
    width: calc(100% - #{$side-bar-width});
}

Much simpler.

This solution is entirely centered around the CSS calc() function.