Align spans one to each other and center them - html

Question

I want to show a decimal number with currency sign.
The currency and the floating point number should be smaller that the integer part.
For example: $ 4,080,048.00
In the jsFiddle you can see the first line is how I want it to be, but it is written in old HTML style.
I done that with modern HTML (The div with 3 spans) but I have a space between the decimal point: $ 4,080,048. 00.
How can I make the second line to looks like the first one?

Answer 1

Write the markup in a way that there is no space between the spans will fix the problem
<div class="container">
<span class="currency">$</span>
<span class="integer">4,080.</span><span class="decimal">53</span>
</div>
Or, if you don't want to change the markup, you could add font-size:0; to your container class
FIDDLE
.container
{
font-size:0;
}
Yet another option would be to add comments between elements within your markup to make it as if the elements were written one after the other:
FIDDLE
<div class="container">
<span class="currency">$</span><!--
--><span class="integer">4,080.</span><!--
--><span class="decimal">53</span>
</div>

Answer 2

It's the white space which is causing this issue
<div class="container">
<span class="currency">$</span>
<span class="integer">4,080.</span><span class="decimal">53</span>
</div>
http://jsfiddle.net/yrFeB/2/
I cannot add the comment in the answer above but you shouldn't use float: left; for this purpose