A Pen by Joe Watkins.

Calc()-Gutter-Test.markdown

Calc() Gutter Test

Using calc() to define column widths along with a gutter which is defined by margin vs padding.

A Pen by Joe Watkins on CodePen.

License.

index.html

<div class="calc-demo">
  <h1>Calc() gutter test</h1>
  <div role="primary">
    <p>Primary</p>
  </div>
  <aside role="complementary">
    <p>Aside</p>
  </aside>
</div>

style.scss

@import "compass";
$brandOne: #231F20;
$brandTwo: #E76654;
$brandFont: rosario, sans-serif;
$breakPoint: 60em;

  
[role='primary']{
  @media(min-width: $breakPoint){
    float: left;
    width: 67%; // old browsers
    width: calc(100% - 33%);
    margin: 0 1.3em 0 0; 
  }
}

aside {
  @media(min-width: $breakPoint){
    float: right;
    width: 27.74%; // old browsers
    width: calc(33% - 1.3em);
  }
}
  




























/* Demo styles */
html,body {
  height: 100%;
  color: #fff;
  font-family: $brandFont;
  text-shadow: 1px 1px 1px darken($brandTwo,40%);
  font-size: 1.3em;
}

body {
  background: $brandOne;
}

h1 {
  text-align:center;
  margin: 0 0 .4em 0;
}

p {
  margin: 0px;
}

* {
  box-sizing: border-box;
}

.calc-demo {
  background: $brandTwo;
  width: 75%; // old browsers
  width: calc(100% - 25%);
  height: 100%;
  margin: 0px auto;
  padding: 1.3em;
  
  [role='primary'], aside {
    padding: 1.3em;
    margin: 0 0 1.3em 0;
    background: darken($brandTwo,7%);
  }
  
}