jsfiddle-console example

https://github.com/eu81273/jsfiddle-console

by Anchit Gupta

HTML

<script src="https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js"></script>
<head>
  <title>ABC</title>
</head>
<body>
  <div>
  <section>
    <div class="header">
      <h1>
        HEADER
      </h1>
    </div>
  </section>
  <section class="mainsection">
  <div class="menu">
    MENU
    <ul>
      <li>ITEM1</li>
      <li>ITEM2</li>
      <li>ITEM3</li>
      <li>ITEM4</li>
      <li>ITEM5</li>
      <li>ITEM6</li>
    </ul>
  </div>
  <div class="content">
    <div>
     CONTENT
    </div>  
    <p>
    Lorem Ipsum dolor site Lorem Ipsum dolor site Lorem Ipsum dolor site Lorem Ipsum dolor site Lorem Ipsum dolor site Lorem Ipsum dolor site Lorem Ipsum dolor site Lorem Ipsum dolor site Lorem Ipsum dolor site Lorem Ipsum dolor site Lor
    
    
    
    
    
    
    em Ipsum dolor site Lorem Ipsum dolor site Lorem Ipsum dolor site Lorem Ipsum dolor site Lorem Ipsum dolor site Lorem 
    </p>
  </div>
  <div class="right">
    <h1>
      AD
    </h1>
    <h1>
       AD
    </h1>
  </div>
  </section>
  <section>
    <!-- <div class="footer">
      <h1>
        FOOTER
      </h1>
    </div> -->
    <footer class="footer"><h1>
    FOOTER
    </h1></footer>
  </section>
  </div>
</body>

CSS

.header{
  height: 25%;
  background-color: blue;
}
.footer{
  height: 25%;
}
.mainsection{
  border: 1px solid;
}
.menu {
  width: 25%;
  display: inline-block;
  vertical-align: top;
  border: 1px solid red;
}
.content {
  width: 50%;
  display: inline-block;
  vertical-align: top;
  border: 1px solid green;
}
.right {
  width: 20%;
  display: inline-block;
  vertical-align: top;
  border: 1px solid blue;
}
h1 {
  text-align: center;
}

/* .column {
  float: left;
  height: 300px;
}
 */