Timeline de acordo com resolução

[Good 4]

Estou fazendo uma timeline em css e javascript, mas só consegui raciocinar o começo.. Primeiramente a imagem de como estou tentando fazer:

 

 

 

A timeline vai funcionar assim:

Cada bolinha dessa é uma data e dependente da resolução da tela, a quantidade de bolinhas irá ser maior ou menor. A tela da timeline sempre terá uma altura padrão, vai ser uma tela fixa. Como tão vendo na imagem acima vai ser de uma ponta a outra do navegador.

 

A minha ideia era pegar a altura da resolução e fazer um cálculo pra calcular quantas bolinhas teriam na tela juntamente com o espaçamento de uma bolinha a outra. E já neste cálculo fazer tipo um loop para determinar o tamanho da bolinha..

 

<style>
.circulo {
    -moz-border-radius: 35px;
	-webkit-border-radius: 35px;
    border-radius: 35px;

    width: 50px;
    height: 50px;
    padding: 2px;

    border: 5px double #CC0000;
    color: #CC0000;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    line-height: 14px;
}

.circulo:hover {
    background: #EBEBEB;
}

.circulo_o {
    -moz-border-radius: 35px;
	-webkit-border-radius: 35px;
    border-radius: 35px;

    width: 20px;
    height: 20px;

    background: #CC0000;
    border: 3px solid #C5C5C5;
    color: #CC0000;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    line-height: 14px;
}

</style>


<div class="circulo">25 <div style="line-height: 20px;">Jun</div> 13</div>
<div class="circulo_o"></div>

 

 

Alguém me ajuda? :s

[Bru_ce 53]

use 100%, veja se ajuda.

[Good 4]

:s o problema não é colocar a timeline pra pegar de uma ponta a outra do navegador não (height 100%)..

 

 

Ninguém?

 

alguém?