html - Susy span-columns Mis-alignment -
i have number of susy layouts working fine on site. i'm trying add has 2 column side bar on left of entire body followed 2 5 column sections. code:
css
$total-columns : 12; // 12-column grid $column-width : 3.5em; // each column 4em wide $gutter-width : 1em; // 1em gutters between columns $grid-padding : 0; // grid-padding equal 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 , body-right-column layout fine long there isn't enough text in body-title section push them below vertical length of side-bar. if there is, float left of page. don't have problem on pages use .body-column-double. behavior seems normal given generated css. class .body-left-column has float:left. also, if make left , right 5,10 , 5 omega, 10 respectively indicated in example page on susy site, become big fit side side. seem need extend side-bar hidden text or keep floating left. way approach or there better solution?
you can't add borders susy grid elements, unless using border-box
model. if remove border, or change box-sizing
border-box
, you'll see falls place. susy has border-box-sizing
mixin change model elements.
another option 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 removes sidebar flow (though can still clear clear
property, unlike position: absolute
). pre
adds left-margin
on body-left-column
make sure stays out of side-bar
area. mean never falls down below sidebar.
Comments
Post a Comment