/* source: http://css-tricks.com/dont-overthink-it-grids/ */
/* works in ie8+, if you need ie7 support further work is needed */
/* this system assumes pixel-width gutters */
/* try to combine it with the box-sizing polyfill to get it working in <ie8 ? */

/* with this construct, we can make up col- classes as we wish and apply the right behavior to them */
[class*='col-'] { float: left; }
/* e.g.: a 2/3s-width col beside a 1/3s-width col */
.col-2-3 { width: 66.66%; }
.col-1-3 { width: 33.33%; }

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

/* gutters */
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
[class*='col-'] { padding-right: 20px; }
[class*='col-']:last-of-type { padding-right: 0; }

/* an optional class for cases where you need gutters on the ouside, too markup looks like: <div class="grid grid-pad"> */
.grid-pad { padding: 20px 0 20px 20px; }
.grid-pad > [class*='col-']:last-of-type { padding-right: 20px; }

/* and some more examples of columns you could create */
.col-1-2 { width: 50%; }
.col-1-4 { width: 25%; }
.col-1-8 { width: 12.5%; }