I am having a hard time figuring out how to dynamically setup a timeline

I tried to setup my timeline like so, the issue is wrapping the content since the height will always be different. Willing to use a div format, any code or direction will be helpful.

The picture has an image which has a fixed height makes it hard, but I can use just the circles and draw somehow a vertical line based on the contents height somehow. I moved it up with margin top but it does not look good. and as you can see the text does not move with it.

This is the screenshot enter image description here

Here is the code for what I tried to do.

<div id="container-tbs"> 

  <div id="tb-columns"> 
    <table id="tb-table">
      <tr>
        <td class="tb-left">
          <table>
            <tr class="tb-date-left tb-date"> <td> JUNE 1, 2016 </td></tr>
            <tr class="tb-title-left tb-title"> <td>  TITLE </td></tr>
            <tr class="tb-text-left tb-text"> <td> DESCRIPTIONSSSSS</td> </tr>
            <tr> <td> </td> </tr>
          </table>
        </td>
       <td><img class="timeline-pic-left" src="public/i/img/entry-left.png"/> </td>

        <td class="tb-right"></td>
      </tr>

       <tr>

        <td class="tb-left"></td>
       <td><img class="timeline-pic-right" src="public/i/img/entry-right.png"/> </td>
        <td class="tb-right">
          <table>

            <tr class="tb-date-right tb-date"> <td> MAY 1, 2016 </td></tr>

            <tr class="tb-title-right tb-title"> <td>  TITLE </td></tr>
            <tr class="tb-text-right tb-text"> <td> LONG DESCRIPTIONS HERE</td> </tr>
            <tr> <td> <img class="tb-pic-right" src="public/i/img/android.png"/> </td> </tr>
          </table>
        </td>

      </tr>
    </table>

  </div>
  </div>

The css:

/* tb TABLES */
    #tb-columns {
         margin: 0 auto;
        height: auto; 
        width: auto; 
        max-width:  500px; 
    }
.tb-left {
           vertical-align:top;
        max-width:  250px; 
        height: auto;
    }



 .tb-right {
           vertical-align:top;
        max-width:  250px; 
    }

 .tb-date-left {
        float: right;
        clear:right;
        margin-right: 10px;
    }

 .tb-title-left {
        float: right;
        clear:right;
        margin-right: 10px;
        margin-top: 10px;
    }

    .tb-text-left {
        float: right;
        clear:right;
        margin-right: 10px;
        margin-top: 10px;
        text-align: right;
    }



    /* RIGHT SIDE     */
   .tb-date-right {
        float: left;
        clear:left;
        margin-left: 10px;
    }

    .tb-title-right {
        float: left;
        clear:left;
        margin-left: 10px;
        margin-top: 10px;
    }

    .tb-text-right {
        float: left;
        clear:left;
        margin-left: 10px;
        margin-top: 10px;
        text-align: left;
    }



/* END tb TABLES */

I used css for vertically aligning the date and then float the text right and left depending on what side. How do I establish this to wrap the content and have the timeline show different different heigh sizes depending on the content being added dynamically.

Answers 1

  • Maybe you can use "display: flex" (aka Flexbox) to achieve what you need and grow those boxes without messing up the other ones.

    Check this example (taken from Eisneim Terry's):
    http://codepen.io/eisneim/pen/goHEr

    HTML

    <h1>Flexbox Timeline</h1>
    
    <ul>
      <li>
        <p>07/2015 - 07/2016</p>
        <p>
          Twitter
          <span>
            Responsibilities: SEO, SEA, E-Mail 
          </span>
        </p>
      </li>
      <li>
        <p>07/2014 - 07/2015</p>
        <p>
          Facebook
          <span>
            Responsibilities: HTML5/CSS3, LESS/SASS, jQuery, CanJS, JavaScript, Canvas, PHP, MySQL, Ruby, Python
          </span>
        </p>
      </li>
      <li>
        <p>07/2013 - 07/2014</p>
        <p>
          Google
          <span>
            Responsibilities: HTML5/CSS3, LESS/SASS, jQuery, CanJS
          </span>
        </p>
      </li>
      <li>
        <p>07/2012 - 07/2013</p>
        <p>
          Apple
          <span>
            Responsibilities: HTML5/CSS3, LESS/SASS
          </span>
        </p>
      </li>
      <li>
        <p>07/2011 - 07/2012</p>
        <p>
          Microsoft
          <span>
            Responsibilities: HTML5/CSS3
          </span>
        </p>
      </li>
    </ul>
    

    CSS

    * {
      margin: 0;
      padding: 0;
    }
    
    *, *:before, *:after {
      box-sizing: border-box;
    }
    
    body {
      font: 1em/1 'Open Sans', sans-serif;
      color: #555;
      background: #f5f5f5;
    }
    
    h1 {
      margin: 0;
      line-height: 80px;
      font-size: 24px;
      font-weight: 700;
      text-align: center;
      color: #fff;
      background: #999;
    }
    
    ul {
      width: 650px;
      margin: 40px auto;
      list-style: none;
    }
    
    li {
      display: flex;
    }
    
    li:last-child {
      border: 0;
    }
    
    li p {
      display: block;
      padding: 20px;
      line-height: 1.4;
    }
    
    li p:nth-child(1) {
      position: relative;
      padding-right: 25px;
      font-size: 14px;
      line-height: 2.5;
      color: #aaa;
    }
    
    li p:nth-child(1):after {
      content: '';
      position: absolute;
      top: 28px;
      right: -12px;
      display: block;
      width: 20px;
      height: 20px;
      border: 5px solid #999;
      border-radius: 50%;
      background: #fff;
    }
    
    li:first-child p:nth-child(1):after {
      background: #cfc;
    }
    
    li p:nth-child(2) {
      flex: 1;
      font-size: 24px;
      border-left: 5px solid #999;
    }
    
    li p span {
      display: block;
      margin: 5px 0 0;
      font-size: 12px;
      font-style: italic;
      color: #aaa;
    }
    

Related Articles