There are a few ways to mix fixed/fluid layouts, depending on your own specific case.
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 yourcolumn-width
setting/units. Addingisolate
will set negative right margins, to keep it from taking horizontal space. Addingwide
, will include an extra gutter in that width. You could also use arbitrary widths like200px
instead. It's up to you.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); }
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; }