Susy span-columns Mis-alignment

Question

I have a number of Susy layouts working fine on my site. I'm trying to add another that has a two column side bar on the left of the entire body followed by two five column sections. This is the code:

CSS

$total-columns  : 12;         // a 12-column grid
$column-width   : 3.5em;      // each column is 4em wide
$gutter-width   : 1em;        // 1em gutters between columns
$grid-padding   : 0;          // grid-padding equal to gutters

@include border-box-sizing; // Part of Susy

.side-bar {  @include span-columns(2,12);  border-right: 2px solid $darkRed;}
.body-title {  @include span-columns(10 omega,12);}
.body-double-column
{
    @include span-columns( 10 omega, 12);
     column-count: 2;
}
.body-left-column { @include span-columns( 5, 12);}
.body-right-column {  @include span-columns( 5 omega, 12);}

HTML

    <div id="bounding-box">
        <div class="side-bar">
        </div> <!-- /side-bar -->
        <section class="body-title">
        </section>
        <section class="body-left-column">
        </section>
        <section class="body-right-column">
        </section>
        <div class="push"></div>
    </div> <!-- /bounding-box -->

The body-left-column and body-right-column layout fine as long as there isn't enough text in the body-title section to push them below the vertical length of the side-bar. If there is, they float to the left of the page. I don't have this problem on pages where I use .body-column-double. This behavior seems normal given the generated css. The class .body-left-column has a float:left. Also, if I make the left and right 5,10 and 5 omega, 10 respectively as indicated in the example page on the Susy site, they become too big to fit side by side. It would seem I need to extend my side-bar with hidden text or the like to keep everything from floating left. Is this the way to approach it or is there a better solution?

Answer 1

You can't add borders to susy grid elements, unless you are using the border-box model. If you remove the border, or change the box-sizing to border-box , you'll see that everything falls back into place. Susy has a border-box-sizing mixin that will change the model for all elements.

Another option would be something like this:

.side-bar {
  @include span-columns(2,12);
  margin-right: -100%;
  border-right: 2px solid red;
}

.body-left-column {
  @include span-columns( 5, 12);
  @include pre(2);
}

The negative margin-right basically removes sidebar from the flow (though you can still clear it with the clear property, unlike position: absolute ). Then the pre adds left-margin on the body-left-column to make sure it stays out of the side-bar area. That will also mean it never falls down below the sidebar.

Answer 2

It turned out I was asking too much of Susy. I fixed the problem by adding a standard wrapper around the body-left-column and body-right-column as shown in the code below. I had gotten away with coding a left, middle, and right column without a wrapper around the last two in another layout because all the columns started together. @Eric's approach fixes the problem in some situations. This approach works regardless of the length of the body-title section.

CSS

.side-bar {  @include span-columns(2,12);  border-right: 2px solid $darkRed;}
.body-wrapper { @include span-columns(10 omega, 12); }
.body-title {  @include span-columns(10 omega,10);}
.body-double-column
{
    @include span-columns( 10 omega, 10);
     column-count: 2;
}
.body-left-column { @include span-columns( 5, 10);}
.body-right-column {  @include span-columns( 5 omega, 10);}

HTML

<div id="bounding-box">
    <div class="side-bar">
    </div> <!-- /side-bar -->
    <section class="body-wrapper">
        <section class="body-title">
        </section>
        <section class="body-left-column">
        </section>
        <section class="body-right-column">
        </section>
    </section> <!-- /body-wrapper-->
    <div class="push"></div>
</div> <!-- /bounding-box -->

This fits better with the example given on the Susy home page .