"layout"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/benstr/pen/KfdLF?limit=all&page=32&q=contact+" /> <style class="cp-pen-styles">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: calc(100% + 20px); 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: 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; left: 32%; top: -64px; width: 68%; } } @media screen and (min-width: 1130px) { #middle, .header-content { width: 900px; margin: 0 auto; } } </style></head><body> <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> </body></html>

Related: See More


Questions / Comments: