In this example below you will see how to do a MD_Ex_3_Master_CSS with some HTML / CSS and Javascript

This awesome code was written by TrickyClimber, you can see more from this user in the personal repository.
You can find the original code on
Copyright TrickyClimber ©
  • HTML
  • CSS
  • JavaScript

    Mastering Layouts : Exercise


  <p>Task description:<br>
  Create a 3 column layout</p>
  <div class="container">
    <div class="left">Left Box</div>
    <div class="middle">Center Box</div>
    <div class="right">Right Box</div>
    <div class="fixed">Fixed block</div>



/*Downloaded from */
    .container {
/* Container specific rules here */
  box-sizing: content-box;
  position: relative;
  padding: 30px 50px;
  width: 500px;
  border: 1px solid black;
  overflow-y: auto;

.right {
/* Common rules here */
  border: 1px solid black;
  width: 100px;
  height: 50px;
  text-align: center;

.left {
  background-color: lightblue;
  float: left;

.middle {
  position: absolute;
  left: 250px;
  background-color: pink;

.right {
  background-color: lightgreen;
  float: right;

.fixed {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #000;
  color: #dedede;

/*Downloaded from */