JQuery, divs and positioning

JQuery, divs and positioning

I'm looping through an array of information to represent it on the screen in separate divs.
  2. $("#timenavigation").append('<div id="'+ arrayYears[i][0] +'" class="' + arrayYears[i][0] + '">'+ arrayYears[i][0] + ':' + thisCount + '</div>');
  3.    $("." + arrayYears[i][0]).css({ top: 20, left: i *100, height: sizeOfDiv, width: divWidth, backgroundColor: '#d'+aL2[i]});
The index.html:


<div id="timenavigation" ></div>
      
    </div>
    
It outputs:


What am I doing wrong?
Why aren't the divs stacking side by side?

Any help would be much appreciated.