HTML CSS Timeline alignment fails after the third element

Issue

I am new to HTML, CSS and JS currently trying to create a personal website for a course project. One of the pages contains a timeline with dates + info. I’ve used a tutorial from W3schools, but please find the code in jsfiddle: http://jsfiddle.net/gua0nkj6/1/

The problem is that the first 3 dates appear fine, but any subsequent dates are misaligned relative to the timeline.

Also below (HTML & CSS):

<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
        <link href="styles.css" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>About me page</title>
    </head>
    <body class="about-me">
          <div class="timeline">
            <div class="container-timeline left-side">
                <div class="content-timeline">
                    <h2 class="timeline-heading">2011</h2>
                    <p class="timeline-text">Lorem ipsum.</p>
                </div>
            </div>
            <div class="container-timeline right-side">
                <div class="content-timeline">
                    <h2 class="timeline-heading">2012</h2>
                    <p class="timeline-text">Lorem ipsum.</p>
                </div>
            </div>
            <div class="container-timeline left-side">
                <div class="content-timeline">
                    <h2 class="timeline-heading">2013</h2>
                    <p class="timeline-text">Lorem ipsum.</p>
            </div>
            <div class="container-timeline right-side" style="border: 4px solid black;">
                <div class="content-timeline">
                    <h2 class="timeline-heading">2014</h2>
                    <p class="timeline-text">Lorem ipsum.</p>
                </div>
            </div>
         </div>
    </body>
</html>


/* Boilerplate CSS for box sizing and body */
* {
  box-sizing: border-box;
}

body {
  background-color: beige;
  font-family: Georgia, Times, Courier;
}

/* Special thanks to W3Schools for the
timeline tutorial: https://www.w3schools.com/howto/howto_css_timeline.asp */
/* Container around content */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: #327c9c;
  top: 0px;
  bottom: 0px;
  left: 50%;
}

.container-timeline {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.container-timeline::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -15px;
  background-color: white;
  border: 3px solid #327c9c;
  top: 19.2px;
  border-radius: 50%;
  z-index: 1;
}

.left-side {
  left: 0;
}

.right-side {
  left: 50%;
}


/* Add arrows to the left container (pointing right) */
.left-side::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.right-side::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.right-side::after {
  left: -9px;
}

/* The actual content */
.content-timeline {
  padding: 20px 30px;
  background-color: #327c9c;
  position: relative;
  border-radius: 6px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {

  /* Place the timelime to the left */
  .timeline::after {
    left: 25px;
  }

  /* Full-width containers */
  .container-timeline {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

  /* Make sure that all arrows are pointing leftwards */
  .container-timeline::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }

  /* Make sure all circles are at the same spot */
  .left-side::after,
  .right-side::after {
    left: 15px;
  }

  /* Make all right containers behave like the left ones */
  .right-side {
    left: 0%;
  }
}

/* format the timeline boxes */
.timeline-heading {
  color: white;
  border-bottom: 1px solid white;
  font-family: Courier;
}

.timeline-text {
  color: white;
  font-family: Georgia;
}

My final result looks like below, I have added a border to the last element to highlight the issue.

Output

Any help appreciated!

Solution

Your problem has been solved. Hope you benefit

/* Boilerplate CSS for box sizing and body */
* {
   box-sizing: border-box;
 }
 
 body {
   background-color: beige;
   font-family: Georgia, Times, Courier;
 }
 
 /* Special thanks to W3Schools for the
 timeline tutorial: https://www.w3schools.com/howto/howto_css_timeline.asp */
 /* Container around content */
 .timeline {
   position: relative;
   max-width: 1200px;
   margin: 0 auto;
 }
 
 .timeline::after {
   content: '';
   position: absolute;
   width: 6px;
   background-color: #327c9c;
   top: 0px;
   bottom: 0px;
   left: 50%;
 }
 
 .container-timeline {
   padding: 10px 40px;
   position: relative;
   background-color: inherit;
   width: 50%;
 }
 
 /* The circles on the timeline */
 .container-timeline::after {
   content: '';
   position: absolute;
   width: 25px;
   height: 25px;
   right: -15px;
   background-color: white;
   border: 3px solid #327c9c;
   top: 19.2px;
   border-radius: 50%;
   z-index: 1;
 }
 
 .left-side {
   left: 0;
 }
 
 .right-side {
   left: 50%;
 }
 
 
 /* Add arrows to the left container (pointing right) */
 .left-side::before {
   content: " ";
   height: 0;
   position: absolute;
   top: 22px;
   width: 0;
   z-index: 1;
   right: 30px;
   border: medium solid #327c9c;
   border-width: 10px 0 10px 10px;
   border-color: transparent transparent transparent #327c9c;
 }
 
 /* Add arrows to the right container (pointing left) */
 .right-side::before {
   content: " ";
   height: 0;
   position: absolute;
   top: 22px;
   width: 0;
   z-index: 1;
   left: 30px;
   border: medium solid #327c9c;
   border-width: 10px 10px 10px 0;
   border-color: transparent #327c9c transparent transparent;
 }
 
 /* Fix the circle for containers on the right side */
 .right-side::after {
   left: -16px;
 }
 
 /* The actual content */
 .content-timeline {
   padding: 20px 30px;
   background-color: #327c9c;
   position: relative;
   border-radius: 6px;
 }
 
 /* Media queries - Responsive timeline on screens less than 600px wide */
 @media screen and (max-width: 600px) {
 
   /* Place the timelime to the left */
   .timeline::after {
     left: 25px;
   }
 
   /* Full-width containers */
   .container-timeline {
     width: 100%;
     padding-left: 70px;
     padding-right: 25px;
   }
 
   /* Make sure that all arrows are pointing leftwards */
   .container-timeline::before {
     left: 60px;
     border: medium solid white;
     border-width: 10px 10px 10px 0;
     border-color: transparent white transparent transparent;
   }
 
   /* Make sure all circles are at the same spot */
   .left-side::after,
   .right-side::after {
     left: 15px;
   }
 
   /* Make all right containers behave like the left ones */
   .right-side {
     left: 0%;
   }
 }
 
 /* format the timeline boxes */
 .timeline-heading {
   color: white;
   border-bottom: 1px solid white;
   font-family: Courier;
 }
 
 .timeline-text {
   color: white;
   font-family: Georgia;
 }
<!DOCTYPE html>

<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta author="Aminul Islam">

   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
   <link href="styles.css" rel="stylesheet">
   <title>About me page</title>
</head>

<body class="about-me">
   <div class="timeline">
      <div class="container-timeline left-side">
         <div class="content-timeline">
            <h2 class="timeline-heading">2011</h2>
            <p class="timeline-text">Lorem ipsum.</p>
         </div>
      </div>
      <div class="container-timeline right-side">
         <div class="content-timeline">
            <h2 class="timeline-heading">2012</h2>
            <p class="timeline-text">Lorem ipsum.</p>
         </div>
      </div>
      <div class="container-timeline left-side">
         <div class="content-timeline">
            <h2 class="timeline-heading">2013</h2>
            <p class="timeline-text">Lorem ipsum.</p>
         </div>
      </div>
      <div class="container-timeline right-side">
         <div class="content-timeline">
            <h2 class="timeline-heading">2014</h2>
            <p class="timeline-text">Lorem ipsum.</p>
         </div>
      </div>
   </div>


   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Answered By – Md Aminul Islam

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published