CodePen

HTML

            
              <div class="article-snippets">
    <div>ARTICLE 2</DIV>
    <div>ARTICLE 3</DIV>
    <div>ARTICLE 4</DIV>
    <div>ARTICLE 5</DIV>
    <div>ARTICLE 6</DIV>
    <div>ARTICLE 7</DIV>
    <div>ARTICLE 8</DIV>
    <div>ARTICLE 9</DIV>
    <div>ARTICLE 10</DIV>
    <div>ARTICLE 11</DIV>
    <div>ARTICLE 2</DIV>
    <div>ARTICLE 3</DIV>
    <div>ARTICLE 4</DIV>
    <div>ARTICLE 5</DIV>
    <div>ARTICLE 6</DIV>
    <div>ARTICLE 7</DIV>
    <div>ARTICLE 8</DIV>
    <div>ARTICLE 9</DIV>
    <div>ARTICLE 10</DIV>
    <div>ARTICLE 11</DIV>
    <div>ARTICLE 2</DIV>
    <div>ARTICLE 3</DIV>
    <div>ARTICLE 4</DIV>
    <div>ARTICLE 5</DIV>
    <div>ARTICLE 6</DIV>
    <div>ARTICLE 7</DIV>
    <div>ARTICLE 8</DIV>
    <div>ARTICLE 9</DIV>
    <div>ARTICLE 10</DIV>
    <div>ARTICLE 11</DIV>
    <div>ARTICLE 2</DIV>
    <div>ARTICLE 3</DIV>
    <div>ARTICLE 4</DIV>
    <div>ARTICLE 5</DIV>
    <div>ARTICLE 6</DIV>
    <div>ARTICLE 7</DIV>
    <div>ARTICLE 8</DIV>
    <div>ARTICLE 9</DIV>
    <div>ARTICLE 10</DIV>
    <div>ARTICLE 11</DIV>
</div>
<div class="main-content">
    <div>ARTICLE 2</DIV>
    <div>ARTICLE 3</DIV>
    <div>ARTICLE 4</DIV>
    <div>ARTICLE 5</DIV>
    <div>ARTICLE 6</DIV>
    <div>ARTICLE 7</DIV>
    <div>ARTICLE 8</DIV>
    <div>ARTICLE 9</DIV>
    <div>ARTICLE 10</DIV>
    <div>ARTICLE 11</DIV>
    
</div>
            
          
!
via HTML Inspector

CSS

            
              html,body {
    margin   : 0;
    padding  : 0;
}
.article-snippets {
    position: absolute;
    width    : 150px;
    height   : 100%;
    background-color: #100;
    z-index: 100;
    overflow: auto;
}
.main-content {
    position: absolute;
    width: 100%;
    margin-left: 150px;
    background-color: #333;
    
}
.main-content div {
    float: left;
    display: inline-block;
    width: 21%;
    height: 100px;
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 2%;
    background-color: #355;
    
}
.article-snippets div {
    color: white;
    text-align: center;
    vertical-align: middle;
    word-wrap: break-word;
    height: 50px;
}
.article-snippets div:nth-child(1) { background-color: #111 }
.article-snippets div:nth-child(2) { background-color: #122 }
.article-snippets div:nth-child(3) { background-color: #133 }
.article-snippets div:nth-child(4) { background-color: #144 }
.article-snippets div:nth-child(5) { background-color: #155 }
.article-snippets div:nth-child(6) { background-color: #166 }
.article-snippets div:nth-child(7) { background-color: #177 }
.article-snippets div:nth-child(8) { background-color: #188 }
.article-snippets div:nth-child(9) { background-color: #199 }
.article-snippets div:nth-child(10) { background-color: #199 }
.article-snippets div:nth-child(11) { background-color: #311 }
.article-snippets div:nth-child(12) { background-color: #322 }
.article-snippets div:nth-child(13) { background-color: #333 }
.article-snippets div:nth-child(14) { background-color: #344 }
.article-snippets div:nth-child(15) { background-color: #355 }
.article-snippets div:nth-child(16) { background-color: #366 }
.article-snippets div:nth-child(17) { background-color: #377 }
.article-snippets div:nth-child(18) { background-color: #388 }
.article-snippets div:nth-child(19) { background-color: #399 }
.article-snippets div:nth-child(20) { background-color: #399 }

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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