CodePen

HTML

            
              <div class="column-1-7"></div>
<div class="column-2-7"></div>
<div class="column-3-7"></div>
<div class="column-1-7"></div>
            
          
!
via HTML Inspector

CSS

            
              * {
  box-sizing: border-box;
}
[class^='column'] {
  float: left;
  min-height: 200px;
  background: red;
  border: 1px solid black;
}

.column-1-7 {
   width: calc(100% / 7);
}
.column-2-7 {
   width: calc(100% / 7 * 2);
}
.column-3-7 {
   width: calc(100% / 7 * 3);
}

body {
  padding: 20px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................