How can I float right two span tags on different lines?

Question

I have three span tags: One is floated left (A) and the other two are floated right (B and C).

However, what I want is to have C positioned below B but both be floated right; that is, on different lines. I tried to use display:block on B, but that didn't seem to help. How can this be done using span tags (not div)?

Here is my css:

#A {
  float:left;
}

#B {
  float:right;
}

#C {
  float:right;
}

Thank you very much.

Answer 1

All you have to do is add clear: right to #C.

See: http://jsfiddle.net/w7K4t/

<div id="container">
    <span id="A">A</span>
    <span id="B">B</span>
    <span id="C">C</span>
</div>


#A {
    float: left;
}
#B {
    float: right;
}
#C {
    float: right;
    clear: right;
}