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

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;
}​