A Pen by Ben Strahan.

index.html

<div id="header">
  <div class="header-content">
    Page Title
  </div>
</div>

<div id="middle">
  <div id="middle-offset">
    
    <div id="left">
      left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left
    </div>
    
    <div class="card">
      <div class="paper-shadow z3-bottom"></div>
      <div class="paper-shadow z3-top"></div>
      <div id="right-header">
        <div class="title">
          Right Header
        </div>
      </div>
      <div id="right">
        <div class="right-content">
          right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right
        </div>
      </div>
    </div>
  </div>
</div>

Material-Design-Contacts-App-Page-Structure.markdown

Material Design Contacts App Page Structure

A proof of concept showing the basic structure of the 'Contacts App' example shown throughout Google's Material Design Specs. There is many more additions needed to make this fully compliant to the specs but it exists purely for showing the structure and not the style.

A Pen by Ben Strahan on CodePen.

License.

style.css

html, body {
    margin: 0; padding:0; border: 0;
    overflow: hidden;
    background: #EBEBEB;
}
#header, #middle, #footer {
    position: absolute;
    width: 100%
}
#header {
    background: #3F51B5;
    height: 128px;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.40);
}
.header-content {
    width: 80%;
    margin: 0 auto;
    padding-top: 24px;
}
#middle {
    background: #EBEBEB;
    top: 128px;
    left: 50%;
    bottom: 0px;
    width: 80%;
    margin: 0 auto;
}
#middle-offset {
  position: relative;
  height: 100%;
  left: -50%;
}
#left, #right {
    overflow-y: scroll
}
#left {
    background: background: #EBEBEB;;
    position: absolute;
    top: 0;
    width: 32%;
    height: 100%;
    padding-top: 24px;
    visibility: visible;
    display: block;
}
.card {
  z-index: 200;
  position: relative;
  height: 106%;
  left: 32%;
  top: -64px;
  width: 68%;
}
#right-header {
    background: #5C6BC0;
    position: absolute;
    top: 0;
    height: 192px;
    z-index: 210;
    width: 100%;
}
#right-header>.title {
  padding: 24px;
}
#right {
    background: #fff;
    position: absolute;
    top: 192px;
    width: 100%;
    bottom: 0;
}
.right-content {
    padding-top: 24px;
    padding-left: 24px;
    padding-right: 24px;
}


.paper-shadow {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: inherit;
  pointer-events: none;
}
.z3-top {
  -webkit-box-shadow: 0 0px 50px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 0px 50px 0 rgba(0, 0, 0, 0.19);
  -ms-box-shadow: 0 0px 50px 0 rgba(0, 0, 0, 0.19);
  -o-box-shadow: 0 0px 50px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 0px 50px 0 rgba(0, 0, 0, 0.19);
}
.z3-bottom {
  -webkit-box-shadow: 0 7px 15px 0 rgba(0, 0, 0, 0.24);
  -moz-box-shadow: 0 7px 15px 0 rgba(0, 0, 0, 0.24);
  -ms-box-shadow: 0 7px 15px 0 rgba(0, 0, 0, 0.24);
  -o-box-shadow: 0 7px 15px 0 rgba(0, 0, 0, 0.24);
  box-shadow: 0 7px 15px 0 rgba(0, 0, 0, 0.24);
}

@media screen and (min-width: 0px) {
  #left {
    visibility: hidden;
    display: none;
  }
  #middle {
    top: 0;
    left: 0;
    bottom: 0px;
    width: 100%;
    margin: 0;
  }
  .card {
    top: 0;
    left: 0;
    width: 100%;
  }
  #middle-offset {
    position: relative;
    height: 100%;
    left: 0;
  }
}

@media screen and (min-width: 450px) {
  .card {
    top: -64px;
    left: 0;
    width: 100%;
  }
  #middle {
    background: #EBEBEB;
    top: 128px;
    left: 50%;
    bottom: 0px;
    width: 80%;
    margin: 0 auto;
  }
  #middle-offset {
    position: relative;
    height: 100%;
    left: -50%;
  }
}

@media screen and (min-width: 750px) {
  #left {  
    visibility: visible;
    display: block;
  }
  .card {
    z-index: 200;
    position: relative;
    height: 106%;
    left: 32%;
    top: -64px;
    width: 68%;
  }
}

@media screen and (min-width: 1130px) {
  #middle, .header-content {
    width: 900px;
    margin: 0 auto;
  }
}