A Pen by Raphael Adrien.

CSS-Responsive.markdown

CSS Responsive

A Pen by Raphael Adrien on CodePen.

License.

index.html

<div class="container">
  <div class="row">
    <div class="col-1-5">
      Conteudo principal
    </div>
    <div class="col-2-5">
      Conteudo Lateral
    </div>
  </div>  
  
</div>

style.css

*, *:after, *:before {
  box-sizing: border-box;
}

.container {
  width: 90%;
  background: blue;
  margin: 0 auto;
}

.col-1-3 {
  width: 33.33%;
  bachground: green;
}

.col-2-3 {
  width: 66.66%;
  background: red;
}

[class*='col-'] {
  float: left;
  /* o padding-rigth = gutters */
  padding-right: 20px;
  /* Border que não ocupa espaço */
  outline: 1px solid yellow;
  background-clip: content-box;
  background-color: silver;
}

[class*='col-']:last-of-type {
  padding-right: 0;
}

.row {
  margin 0 0 20px 0;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.container:after {
  content: "";
  display: table;
  clear: both;
}

.col-1-5 {
  width: 20%;
}

.col-2-5 {
  width: 40%;
}

.col-3-5 {
  width: 60%;
}

.col-4-5 {
  width: 80%;
}

.col-5-5 {
  width: 100%;
}

.push-right-1-5 {
  margin-left: 20%;
}

.push-right-2-5 {
  margin-left: 40%;
}

.push-right-3-5 {
  margin-left: 60%;
}

.push-right-3-5 {
  margin-left: 80%;
}