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

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -

php - Accessing static methods using newly created $obj or using class Name -