Home/ Questions/Q 8046183
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T05:43:33+00:00

I’m creating an interactive timeline where each event is a list item with HTML5

  • 0

I’m creating an interactive timeline where each event is a list item with HTML5 data tags that set the start date and end date. (See below)

<ul>
    <li data-start="-4181" data-end="-3251">Adam</li>
    <li data-start="-4173" data-end="-4117">Cain</li>
    <li data-start="-4163" data-end="-4125">Abel</li>
    <li data-start="-4051" data-end="-3139">Seth</li>
    <li data-start="-3946" data-end="-3041">Enos</li>
</ul>

I’m getting jQuery to properly set the width of each event, and a margin-left from the beginning of the parent div as you can see below.

Timeline

Here’s my real question… I’m currently using float:left on the list items, but the short ones, such as Cain and Abel, are floating against the list item for Adam, rather than jumping to a new line and positioning properly against the left. This makes sense, and should float against the neighboring element is there is space in the parent element – BUT, is there a way to use a combination of floating and absolute positioning to dynamically align these items?

The final timeline will have 800+ events, and I need them to nicely share the timeline space AND I don’t want them to stack any taller than 10 events high.

Any help, or ideas are greatly appreciated!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You really need a lot of complex JavaScript to make this work correctly. You need to calculate where each previous box is, then have jquery place the next box in a position so that it won’t conflict with any previous ones. Use position:absolute but have javascript calculate where it should go. Assign each li a top and left value using jquery based off where you calculated it to be placed. CSS float won’t be able to do what you want, don’t use it at all in this case.

    • 0