MD_Ex_3_Master_CSS

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

Thumbnail
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 Codepen.io
Copyright TrickyClimber ©
  • HTML
  • CSS
  • JavaScript
    
<html>

<head>
  <title>
    Mastering Layouts : Exercise
  </title>
</head>

<body>

  <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>
  </div>
   

</body>

</html>

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

.left,
.middle,
.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 https://www.codeseek.co/TrickyClimber/md_ex_3_master_css-wzAvEm */
    

Comments