Proportional responsive DIVs

It can be useful as a website layout

by Ovi Stof

HTML

<div class="rdResp">
      <div class="colResp col01">
        <h2>Col 1 Rd 0</h2>
        <p>Some text...</p>
      </div>
      <div class="colResp col02">
        <h2>Col 2 Rd 0</h2>
        <p>Some text...</p>
      </div>
      <div class="colResp col03">
        <h2>Col 2 Rd 0</h2>
        <p>Some text...</p>
      </div>
    </div>
    <div class="rdResp">
      <div class="colResp col11">
        <h2>Col 1 Rd 1</h2>
        <p>Some text...</p>
      </div>
      <div class="colResp col12">
        <h2>Col 2 Rd 1</h2>
        <p>Some text...</p>
      </div>
    </div>
    <div class="rdResp">
      <div class="colResp col21">
        <h2>Col 1 Rd 2</h2>
        <p>Some text...</p>
      </div>
      <div class="colResp col22">
        <h2>Col 2 Rd 2</h2>
        <p>Some text...</p>
      </div>
    </div>
    <div class="rdResp">
      <div class="colResp col31">
        <h2>Col 1 Rd 3</h2>
        <p>Some text...</p>
      </div>
      <div class="colResp col32">
        <h2>Col 2 Rd 3</h2>
        <p>Some text...</p>
      </div>
    </div>

CSS

.colResp {
        box-sizing: border-box;
        float: left;
        padding: 10px;
        height: 300px; 
        border: 1px dotted blue; 
      }
      .col01,.col02,.col03 {width:33.3%;max-height:50px;padding:3px;}
      .col11 {width: 70%;}
      .col12 {width: 30%;}
      .col21 {width: 60%;}
      .col22 {width: 40%;}
      .col31,.col32 {width: 50%;}
      .rdResp:after {      /* Clear floats after the columns */
        content: "";
        display: table;
        clear: both;
      }    
      @media screen and (max-width: 600px) { /* Responsive layout  */
        .colResp {
          width: 100%;
        }
      }
     .col01 h2, .col01 p
     ,.col02 h2, .col02 p
     ,.col03 h2, .col03  p {line-indent:0;margin:0;padding:0;}