Format Math Equation (5,343 + 32) Vertically with CSS - html

Question

I'm trying to format math equations vertically using CSS. For example 5,343 + 32 should be formatted as so:
Line 1: 5,343 (right aligned)
Line 2: + (left aligned) 32 (right aligned) --- Note that the plus sign and bottom number are on the same line.
Line 3: ------ (horizontal line)
I've been fooling around with this for the last hour and have had very little luck.
I laid by HTML out like this:
<div id="textbox">
<p class="upperNum">5,343</p>
<p class="sign">+</p>
<p class="lowerNum">32</p>
<p class="line"><hr></p>
</div>

Answer 1

A semantic approach
Here's a semantic approach to marking up an equation that, from the same markup, can be rendered horizontally or vertically by adding a single class. These equations are made up of numbers, an operator, and an equals sign. Here's the markup for an equation:
<span class="equation">
<span class="number">5,343</span>
<span class="operator">+</span>
<span class="number">32</span>
<span class="equals">=</span>
<span class="number">5,375</span>
</span>
That alone renders horizontally:
5,343
+
32
=
5,375
With a little CSS, we quickly can transform into a stacked layout. We just add a single stacked class to the equation element:
<span class="equation stacked">
<span class="number">5,343</span>
<span class="operator">+</span>
<span class="number">32</span>
<span class="equals">=</span>
<span class="number">5,375</span>
</span>
The following CSS does the magic:
.equation.stacked {
display: inline-block;
}
.equation.stacked .number {
display: block;
margin-left: 1em; /* space for the operator */
text-align: right;
}
.equation.stacked .operator {
float: left;
}
.equation.stacked .equals {
display: block;
height: 0;
border-bottom: solid 1px black;
overflow: hidden;
}
This renders like this:
Here's a JSBin you can explore: http://jsbin.com/afemaf/1/edit

Answer 2

Do you mean something like this?: http://jsfiddle.net/PkfAU/2/
What you would be doing is using divs, because they are better for creating layouts. Paragraphs are also valid, as the other answer points out, but I find it easier to see with divs. In this case you will need a container div, and three horizontal ones, the second of them being also a container.
.plus and .number are floating inside its container .second, because you need them to use the same horizontal space (all floating elements require a wrapper).
HTML:
<div class="container">
<div class="first">5,343 </div>
<div class="second">
<div class="plus">+</div>
<div class="number">32</div>
</div>
<div class="third">
<div class="result">5,375</div>
</div>
</div>
CSS:
.container {
width:200px;
}
.first,
.second {
width:200px;
text-align:right;
display:table;
}
.plus {
width:auto;
float:left;
}
.number {
width:auto;
float:right;
}
.third {
width:200px;
text-align:right;
border-top:1px solid black;
}​

Answer 3

I think this may be your best bet:
HTML:
<div id="textbox">
<p class="upperNum">5,343</p>
<p class="lowerNum">
<span class="operand">32</span>
<span class="sign">+</span>
</p>
<br class="clear" />
<p class="line"><hr></p>
</div>
CSS:
#textbox { width: 75px; }
.upperNum { text-align: right; }
.operand { float: right; }
.sign { float: left; }
.clear { clear: both; }
Here's a fiddle that shows this effect also:
http://jsfiddle.net/8CPar/
Here, you can contain the bottom line in a paragraph, then give the operator and operand a separate span container that you can float, giving you the desired effect. Then, you add a "clear break" which clears the float, making the horizontal break show correctly.
I hope this helps!

Answer 4

There are some fine examples here, but I went through with the effort of making a fiddle so might aswell post it.
You just need to ensure that widths and alignments are set correctly and it should work out.
My JSFiddle Example.
<div id="list">
<span class="item">5472</span>
<span class="operator">+</span><span class="item operand">32</span>
<hr class="divider"/>
<span class="result">5504</span>
</div>
With css
.list
{
width:50px;
}
span
{
display:block;
margin-left:20px;
font-family:"Lucida Console", Monaco, monospace;
width:50px;
}
.operator
{
float:left;
width:20px;
margin-left:0px;
}
.divider
{
clear:both;
width:40px;
margin-left:20px;
}
.operand
{
float:left;
width:50px;
}
I also created an example using pre, that uses pre formatted text, so it should still be precise.

Answer 5

Classics,
<html>
<head>
<style type="text/css">
.textbox
{
width: 100px;
}
.upperNum
{
text-align: right;
width: 100%;
}
.sign
{
float: left;
text-align: left;
}
.lowerNum
{
text-align: right;
}
.secondline
{
clear: both;
width: 100%;
}
</style>
</head>
<body>
<div class="textbox">
<div class="upperNum">
5,343
</div>
<div class="secondline">
<div class="sign">
+
</div>
<div class="lowerNum">
32
</div>
</div>
<div>
<hr />
</div>
</div>
</body>
</html>