Не изменяя структуру HTML, вы можете сделать это следующим образом:
1) Добавить класс к разделам, что-то вроде .section.
<div class="section" id='section1'>
...
</div>
<div class="section" id='section2'>
...
</div>
<div class="section" id='section3'>
...
</div>
...
2) Затем измените относительную позицию на абсолютную позицию для элемента строки, чтобы он был абсолютно позиционирован посередине.
#line {
height: 500px;
width: 5px;
border: 1px solid green;
background: green;
position: absolute;
left: 50%;
}
3) Наконец, сделайте каждую секцию 50% от общей ширины и используйте селектор nth-of-type(), чтобы она чередовалась слева направо, используя поле слева для секций, которые будут справа.
.timeline .section:nth-of-type(2n) {
margin-left: 50%;
}
.section {
width: 50%;
}
Если вы хотите, чтобы каждый раздел был немного ниже предыдущего, вы можете добавить некоторую отрицательную маржу, которая немного странна, но в этом случае может работать хорошо.
Первый раздел не нуждается в этом. Селектор номер 2, потому что это второй ребенок, а не первый. Первый - это элемент about div.
.section {
margin-top: -50px;
}
.timeline .section:nth-of-type(2) {
margin-top: 0;
}