Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <div class="big-box">
      <p>width: 500px, font-size: 20px </p>
      
      <div class="red-box">
        <p>width: 60%, font-size: 75%</p>
      </div>
      <div class="green-box">
        <p>width: 75%, font-size: 50%</p>
      </div>
      
    </div>
​
  </body>
</html>
 
​
.big-box {
  /* .big-box is the parent of .red-box and .green-box */
  width: 500px;
  border: 1px solid black;
  font-size: 20px;
  text-align: center;
}
​
.red-box {
  width: 40%; /* = 200px or 40% of 500px (width of .big-box)*/
  padding: 20px;
  border: 1px solid red;
  font-size: 75%; /* = 15px or 75% of 20px (font-size of .big-box)*/
}
​
.green-box {
  width: 75%; /* = 375px or 75% of 500px (width of .big-box)*/
  padding: 20px;
  border: 1px solid green;
  font-size: 50%; /* = 10px or 50% of 20px (font-size of .big-box)*/
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x