Simple CSS Timeline using clear to avoid item collisions

It's easy to forget some of the simplest CSS properties are secret super heroes.

The property of the day for me is clear.

Here's an example using it to make sure we don't have sections floating to the wrong side as each timeline area is a list item in a single unordered list. You can see it prevent collisions as you resize the browser window it'll push down the items to the other side so that you don't get items on the left overtake items on the right and appear in the wrong order.

Check the code comments to see how it's built.

See the Pen CSS 2 Column Timeline - With ability to choose which side each item shows on (plus a way to join 2 together) by Andrew Stilliard (@stilliard) on CodePen.