A Pen by A Non Ymous.

An-Anonymous-Pen.markdown

An Anonymous Pen

A Pen by Captain Anonymous on CodePen.

License.

index.html

<div id="wrapper">
  <section>
    <article class="text">
      <h1>Heading</h1>
      <h2>Heading</h2>
      <h3>Heading</h3>
      <h4>Heading</h4>
    </article>
  </section>
  <aside class="main">&nbsp;</aside>
  <nav class="main">&nbsp;</nav>
</div> 

style.css

/*

  <div id="wrapper">
    <section>
      <article class="text">
        <h1>Heading</h1>
        <h2>Heading</h2>
        <h3>Heading</h3>
        <h4>Heading</h4>
      </article>
    </section>
    <aside class="main">&nbsp;</aside>
    <nav class="main">&nbsp;</nav>
  </div>

*/

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#wrapper {
  position: relative;
  padding: 0 180px;
  min-width: 768px;
  min-height: 100px;
  width: 100%;
  height: auto;
  background: gray;
  }
  /* if 360 > 30% then kick to width padding = 1200px */
  @media screen and (min-width: 1200px) {
    #wrapper { padding: 0 15%; }
  }

section { min-width: 538px; background: white; vertical-align: top; }

article.text {
  padding: 0 5%;
  width: 100%;
  border-right: 5% solid #b8bf45;
  border-left: 5% solid red;
  background: #e0e1af; }

nav.main, aside.main {
  position: absolute;
  top: 0;
  min-width: 180px;
  width: 15%; height: 100%;
  border: 0 solid #60b4d8;
  background: #b1d4e2;
}
nav.main {
  left: 0; padding: 0 10px 0 20px;
  border-width: 0 10px 0 20px; }
aside.main {
  right: 0;
  padding: 0 20px 0 10px;
  border-width: 0 20px 0 10px;  }