Trouble with positioning

[Sansespere]

Here's my HTML

<div>	<a title="Twenty-sided die" href="#" id="d20">Roll a d20:<span class="right" id="d20result">0</span></a><br />	<a title="Twelve-sided die" href="#" id="d12">Roll a d12:<span class="right" id="d12result">0</span></a><br />	<a title="Ten-sided die" href="#" id="d10">Roll a d10:<span class="right" id="d10result">0</span></a><br />	<a title="Percentile die (1-100%)" href="#" id="d100">Roll a d100:<span class="right" id="d100result">0</span></a><br />	<a title="Eight-sided die" href="#" id="d8">Roll a d8:<span class="right" id="d8result">0</span></a><br />	<a title="Six-sided die" href="#" id="d6">Roll a d6:<span class="right" id="d6result">0</span></a><br />	<a title="Four-sided die" href="#" id="d4">Roll a d4:<span class="right" id="d4result">0</span></a><br />	<a title='"Three-sided die" Impossible to achieve in reality' href="#" id="d3">Roll a d3:<span class="right" id="d3result">0</span></a><br />	<a title='"Two-sided die" or a coin' href="#" id="d2">Roll a d2:</a><span class="right" id="d2result">0</span>   </div>

and here is my CSS for related things:

body { background-color: #1f001f; text-align: center}span { font-family: times; color: #00cc00; font-size: 12pt}span.right {float:right;position:relative;left:-600px;top:-23px}a { font-family: times; font-size: 12pt}a:link { color: #00cc00; text-decoration: none}a:visited { color: #00cc00; text-decoration: none}a:hover { color: #00ff00; text-decoration: underline}a:active { border: none; outline: none; color: #00cc00; text-decoration: underline}

The problem is every time the function I have in javascript changes my number to a two-digit number, the link beneath the line it is currently being displayed on moves back one. They are on different lines but somehow must be connected. I want the link and the span to be seperated by a bit of space, yet still centralized, and I want the size of the span preceding the next link to not effect the position of the next link.Thanks, Eru