Responsive Layout with Panels

Panels resize with viewport.

by Shaun Ellis

HTML

<p>Responsive layout</p>
    <div class="layout">
        <div class="content"></div>
        <div class="sidebar"></div>
        <div class="form"></div>
        <div class="controls"></div>
    </div>

CSS

/* start presentation styles */

        html, body {
          background-color: #FF5C00;
          height:100%;
        }
        
        .layout {
          position: relative; 
          top: 10px;
          height:80%;
        }

        .form {
          background-color: rgba(255, 255, 255, 0.4);
          position: absolute; 
          bottom: 10px;
          left: 0;
          height: 20%;
          width: 75%;
        }

        .controls {
          background-color: rgba(255, 255, 255, 0.4);
          position: absolute; 
          bottom: 10px;
          right: 0;
          height: 20%;
          width: 23.5%;
        }

        .content {
          background-color: rgba(255, 255, 255, 0.2);
          position: absolute; 
          top: 0;
          left: 0;
          height: 70%;
          width: 75%;
        }

        .sidebar {
          position: absolute; 
          top: 0;
          right: 0;
          background-color: rgba(255, 255, 255, 0.2);
          height: 70%;
          margin-bottom: 5px;
          float: right;
          width: 23.5%;
        }