Search code examples
htmlcsstimeline

centered HTML timeline structure using CSS? With only the sides scaling?

Okay so I have this structure that I am trying to create with CSS, but all my attempts have not yielded a proper result, I tried searching the internet for help, and found some guides to timeline structures but none of them seemed to do what I am trying to do.

So here is what my basic structure is: enter image description here

So the idea here is that the window resolution is 1800px in width, and structure is some div container, the light grey background, that is somehow centered either a margin: 0 auto or something else with a set with of 1200px. Then to act as the backbone of the page is the middle red timeline which is centered and will keep the same set width, not a percentage. Around the timeline on the left and right side there will be these tooltip type boxes which will scale in height depending on the amount of text.

Next if you resize the window resolution to something like 1000px in width, therefore smaller than the light grey area. The middle timeline stays the same set width, but the tooltip boxes changes in width and increases in height because of the lack horizontal space, instead it uses the vertical space. the tooltip boxes will keep the same distance from the timeline, let's say of 15px, so they sort of have to decrease in width from both sides, and that is where I am running into a wall. enter image description here

The way I imagened it myself was somehow for the timeline to be build out of modules, like shown below, so the tooltips would correspond to a part of the timeline, and then timelines with tooltips would be stacked up on each other. But any solution is appreciated,

enter image description here

Here is a link to what I have so far: http://codepen.io/anon/pen/wWZwGL

* {
  margin: 0px;
  font-family: sans-serif;
}

.timezone{
  margin-bottom: 10px;
  position: relative;
  padding: 5px 0;
}

.timezone > div {
  display: inline-block;
  box-sizing: border-box;
}

.timeline {
  width: 100px;
  background: darkred;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.event_left {
  margin-left: 1%;
  width: calc(49% - 1% - 20px);
  background: #ededed;
  position: relative;
  vertical-align: middle;
  padding: 10px;
}

.event_right {
  width: calc(45% - 1% - 30px);
  background: #ededed;
  margin-left: calc(2% + 40px);
  position: relative;
  vertical-align: middle;
  padding: 10px;
}

.left {
  width: 50%;
  height: 100px;
  float: left;
}

.right {
  width: 50%;
  height: 100px;
  float: left;
}
<div class="content">
  <div class="timezone">
    <div class="event_left">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
    <div class="timeline">34.000 BNC</div>
    <div class="event_right">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </div>
</div>

where I am trying to achieve the tooltip scaling, it's not close to perfect, and the timeline height doesn't even adjust with the tooltip height :(

Any suggestions?

Solution

  • In the absence of the rest of the code, I used some of mine. To explain it briefly, I have centered the "timeline" darkred bar and gave it a 2% width, then positioned the other ones accordingly, having a width of 49% - 1% - 20px where the 20px is the distance to the bar.

    The right side has a margin-left of 2% (the width of the bar) + double the distance to the bar (we don't want do disregard the left one's margin) This is how the calculations look for the right side:

        .level .right {
        width: calc(49% - 1% - 20px);
        margin-left: calc(2% + 40px);
        vertical-align:middle;

    The full codepen can be viewed here. I hope it hepls!