Stack DIVs in one line if there is enough room

Question

I'm looking to create a horizontal timeline and avoid one extremely performance price issue.

suppose we have 3 events represented as 3 divs.

<div class="timeline">
<div id="Ev1">
  Event 1
</div>
<div id="Ev2">
  Event 2
</div>
<div id="Ev3">
  Event 3
</div>

now I want them to display each in its required time according to the horizontal axis i have tried to use margin for that but sure did not work because they are not set to float:left; the issue is i don't want them to float left i want to control which event is displayed where on the horizontal axis either by using margin or left:##px or any other means that can be converted to a time calculation.

so here is the CSS:

body {
  background: #AAA;
}

.timeline {}

.timeline div {
  height: 30px;
}

#Ev1 {
  background: #e10b1f;
  width: 600px;
  margin-left: 231px
}

#Ev2 {
  background: #fb7d29;
  width: 230px;
}

#Ev3 {
  background: #96cf67;
  width: 460px;
}

I know i could use JS to calculate how many events i have in parallel and fix the top property according to the offset and so on but this is exactly what i am trying to avoid because it causes a sever performance hit when we are looking at hundreds of events on the timeline.

I am looking for an elegant way to tell the browser that if there is enough room on a single line display the DIVs one after the other but if not then stack them one on top with there respective offset according to the event time.

CodePen: http://codepen.io/arthurv/pen/WwbmRr

Answer 1

I'm not sure I got what you are trying to do. Does this work?

.timeline div {
    display: inline-block;
}

Answer 2

1. The CSS architecture

Use percentage based widths + floats for your indidivual events :

 body { background : #AAA; } .timeline { width : 100%; } .timeline div { float : left; height : 30px; } #Ev1 { background : #e10b1f; width : 41.51%; } #Ev2 { background : #fb7d29; width : 17.82%; margin-left : 5%; } #Ev3 { background : #96cf67; width : 27.66%; margin-left : 8%; } #Ev4 { background : #ffc901; width : 17.82%; } #Ev5 { background : #88aaff; width : 67%; margin-left : 12%; } 

 <div class="timeline"> <div id="Ev1"> Event 1 </div> <div id="Ev2"> Event 2 </div> <div id="Ev3"> Event 3 </div> <div id="Ev4"> Event 4 </div> <div id="Ev5"> Event 5 </div> </div> 

2. Generating the values for your widths

To dynamically calculate the actual percentages for the widths of #Ev1 , #Ev2 , #Ev3 , you could use eg. PHP , Less or Sass .

For example, if you'd use Sass, you could using this code to generate the CSS shown in #1 :

$events : (
    1 : (0, 41.51%, #fb7d29),
    2 : (5%, 17.82%, #fb7d29),
    3 : (8%, 27.66%, #96cf67),
    4 : (0, 17.82%, #ffc901),
    5 : (12%, 67%, #88aaff)
);

@mixin generate-events() {
    @each $key, $value in $events {
        #Ev#{$key} {
            background : nth($value, 3);
            width : nth($value, 2);
            $margin-left :  nth($value, 1);
            @if $margin-left != 0 {
                margin-left : $margin-left;
            }
        }
    }
}

body {
    background : #AAA;
}

.timeline {
    width : 100%;
}

.timeline div {
    float : left;
    height : 30px;
}

@include generate-events();