Offset Experiment

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

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


  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Offset Experiment</title>
      <link rel="stylesheet" href="css/style.css">



  <div class="parent">
  <div class="child c1"></div>
  <div class="child c2"></div>
  <div class="child"></div>
  <div class="child"></div>
  <script src=''></script>


    <script  src="js/index.js"></script>



/*Downloaded from */
.parent {
  width: 400px;
  height: 100px;
  background-color: red;
  margin: 0 auto;
.child {
  width: 40px;
  height: 50px;
  background-color: blue;
  display: inline-block;
  margin: 10px;

/*Downloaded from */
var parent = $('.parent').offset().left;
var child = $('.c2').offset().left;