how to align multiple divs using CSS
===

i have a number containers that i want aligned. This is the code i have so far:

     http://jsfiddle.net/DphXz/64/

First of all, when i run this code from my machine, the "day-label" is double the size that it shows on jsfiddle. the next two ("max-points" and "close-points") are stacked on top of each other and are right text to "day-label", this is as i want it.

Now the next three containers i can't seem to get them lined up, the "points-totals" container i want to be like the "day-label" but to the right of the max and close points. then the next two "thirty-points" and "fifty-points" i want next to the totals. 

They should all be on the same line but they're not all the same shape.

Does anyone know what i'm talking about or am i confusing the situation?

I think i'll be able to use "top:X" and  "left:X" but i wanted to know if there was an easier way to get them all inline with each other? like the first three containers.

Thanks for the help.