1px border throwing off SUSY grid

Question

I'm trying to position two buttons side-by-side using Susy and this seems to work fine:

.fifty {
    @include span-columns(3);
    @include nth-omega(2n);
}

However as soon as I ad a 1px border to the button the effective width is 100%+4px and thus it breaks the layout.

I'm using the Compass Vertical Rhythm plugin for all my button padding values so would like not to mess that up.

Answer 1

This is related to "How to include padding in column width with Susy", but your second option is a bit different. This problem isn't specific to Susy - it's true of any fluid layout - But Compass and Susy can help you with the first solution:

1. Use box-sizing: border-box; - this is now supported by all the major browsers, and Compass has a handy box-sizing() mixin to take care of prefixes for you. If you use it everywhere (like I do), it can change the size of a Susy container, but Susy comes with the handy mixin to fix all that for you. Simply add this at the root, before you set your containers - it will set the box model, and let Susy know to adjust for it:

   @include border-box-sizing;
   

   Or just use the Compass box-sizing(border-box) mixin where you want it (on these buttons).

2. Since borders don't take % values, there is simply no good way to add borders to fluid elements (using the default content-box model). If you can't use the border-box model, the only other option is to add an internal element in the markup, use the outer for sizing, and the inner for borders and styles.

3. There is a third option - using calc() - but it's harder to do, and has even less browser support...

Option #1 is the best by far - as long as you can leave IE7 out of the fun.