KpYBoN

index.html

<div class=container>
<nav class=elem>
  <li>Function1</li>
  <li>Function2</li>
  <li>Function3</li>
  <li>Function4</li>
  <li>Function5</li>
  <span class="endlabel">&lt;/nav&gt;</span>
</nav>
<section class=elem>
  <span class="big">section A</span>
  <span class="s_endlabel">&lt;/section&gt;</span>
</section>
<section class=elem>
  <span class="big">section B</span>
  <span class="s_endlabel">&lt;/section&gt;</span>
</section>
<section class=elem>
  <span class="big">section C</span>
  <span class="s_endlabel">&lt;/section&gt;</span>
</section>
  <span class="c_endlabel">container&nbsp;</span>
</div>

KpYBoN.markdown

KpYBoN

A demo for RWD

A Pen by Yan-Long on CodePen.

License.

style.css

@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
    border: solid #D64078 3px;
  }
  section {
    margin-left: 25%;
    border: solid #FDC72F 3px;
  }
}
/*small screen set*/
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
  nav {
    border: solid #D64078 3px;
  }
  section {
    border: solid #FDC72F 3px;
  }
}

.endlabel {
    position: absolute;
    float: right;
    right: 0;
    bottom: 0;
    padding: 3px 0 0 3px;
    color: white;
    background-color: #D64078;
}
.s_endlabel {
    position: absolute;
    float: right;
    right: 0;
    bottom: 0;
    padding: 3px 0 0 3px;
    color: white;
    background-color: #FDC72F;
}
.c_endlabel {
    position: absolute;
    float: right;
    left: 0;
    bottom: 0;
    padding: 3px 0 0 3px;
    color: white;
    background-color: #6AC5AC;
}
.elem {
    position: relative;
}
.big{
    font-size: 150px;
}
.container {
    position: relative;
    border: solid #6AC5AC 3px;
}
* {
  padding : 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

RWD demo