How would you flush two characters of arbitrary length using HTML/CSS? - html

Question

I want to create a worksheet addition of, say, two five digit numbers. Using text-decoration:underline;, I get something like the following:
12345
+ 12345
-------
Wrapping in a div and using
style="width: 8em; margin: 1em; font-family: courier; text-align: right;"
gives me something like the following:
12345
+ 12345
-------
which is marginally better than before. How would accomplish aligning the digits on the ones? To be clear, the digits will be the same length, but the best answer would be robust to two digits of size m and n where m does not necessarily equal n, but I'm willing to trade robustness for not requiring javascript.
12345
+ 12345
-------
^---- align the ones digit
Thanks in advance!

Answer 1

I removed width: 8em and added float: left.
<div style="float: left; margin: 1em; font-family: courier; text-align: right;">
12345<br />
+ 66612345<br />
-------
</div>
Live Demo
I feel like I've misunderstood the problem because this seems too simple a solution :)

Answer 2

This was rather fun to put together: Live Demo.
Note: Only tested on Firefox!
HTML:
<div class="worksheet">
<span>12345</span>
<span class="add">54321</span>
</div>
<div class="worksheet">
<span>123</span>
<span class="sub">45678</span>
</div>
<div class="worksheet">
<span>54321</span>
<span class="add">1234</span>
<span class="sub">987</span>
<span class="add">1357924</span>
</div>
CSS:
.worksheet {
border: 1px dotted #000;
display: inline-block;
font-family: monospace;
margin: 0.5em;
padding: 10px;
text-align: right;
}
.worksheet .add:before {
content: "+";
float: left;
margin-right: 0.5em;
}
.worksheet .sub:before {
content: "-";
float: left;
margin-right: 0.5em;
}
.worksheet span { display: block; }
.worksheet span:last-child {
border-bottom: 2px solid #000;
margin-bottom: 1em;
}