Question

Description:
Have vertical timeline for 12 hours day.
Height is 720px.
From the first glance markup should look like:

<div style="margin-top:0px;">
 9:00
</div>
<div style="margin-top:60px;">
 10:00
</div>
       ...
<div style="margin-top:60px;">
 11:00
</div>

It’s occured,that we should take into consideration font-size.
As it’s more,than less should be the value of margin-top property.

Demo:
see markup
For current font-size value of margin-top is 38px
Logically,it should be always equal to 60px.

Question:
Is there CSS solution without JS for vertical timilene,which doesn’t depend upon font-size?

Answer 1

It’s not exactly clear what you want. But I suspect you’d like to ensure equally spaced divisions of the timeline.

You don’t need to compensate for font-size with margin-top. Remove those inline styles and simply fix the height of the divs with

.timeline-container > div{
   height:60px;   
}

see: http://jsfiddle.net/fmSfc/4/