html - having subscript and superscript one on top of another

Question

With html (or css) is there a way to have a subscript and superscript in the same location? I tried this

<sup>16</sup><sub>16.00</sub>O

but this will make the superscript 16 to the left of the subscript 16.00, is there a way to make the subscript and superscript one on top of another?

Note that I am not using CSS3.

Note that I tried making this my CSS

.container {}

.sup { 
    position: relative;
    top: 0.5em;
}

.sub {
    position: relative;
    top: 0.5em;
    left: -0.5em;
}

with this as the html

<span class='sup'>3</span><span class='sub'>4</span>

which works but it depends on the length of the digits. This won't look right

<span class='sup'>16</span><span class='sub'>16.000</span>

since the superscript has 2 digits while the subscript has 6 digits. Is there a way to make them right aligned? I tried doing

.container {
   text-align: right;
}

but that didn't work.

Answer 1

With a little bit of structuring using div's and floats I was able to replicate the image using <sub> and <sup> elements. My example fits all elements into a 100px by 100px square. If that box needs to be smaller or can be large then some minute adjustments will be needed obviously.

This is all CSS2 spec also, no CSS3 was used so no compatibility issues.

JSFiddle

HTML:

<div class="box">
    <div class="superscripts">
        <sup class="sup-left">16</sup>
        <sup class="sup-right">8</sup>
    </div>
    <div class="element"><abbr>O</abbr><br /> Oxygen</div>
    <div class="subscripts">
        <sub class="sub-left">16.00</sub>
        <sub class="sub-right">(6)</sub>
    </div>
</div>

CSS:

.box {
    width: 100px;
    height: 100px;
    border: 2px solid black;
}

.element {
    text-align: center;
    clear: both;
    height: 60px;
}

.element abbr {
    font-size: 28px;
    font-weight: bold;
}

.superscripts,
.subscripts {
    height: 18px;
}


.superscripts .sup-left {
    float: left;
    padding: 2px 0 0 2px;
}

.superscripts .sup-right {
    text-align: right;
    float: right;
    padding: 2px 2px 0 0;
}
.subscripts .sub-left {
    float: left;
    padding: 4px 0 2px 2px;
}

.subscripts .sub-right {
    text-align: right;
    float: right;
    padding: 4px 2px 2px 0;
}

Answer 2

I think it can be a little less complicated and more flexible by using absolute positioning and em instead of px. Here's a JSFiddle.

HTML:

<div class="container">
  <div class="edge">
    <span class="top left">16</span>
    <span class="top right">8</span>
  </div>
  <div class="element">
    <abbr>O</abbr>
    <div>Oxygen<div>
  </div>
  <div class="edge">
    <span class="bottom left">16.00</span>
    <span class="bottom right">(6)</span>
  </div>
</div>

CSS:

.container {
  height: 7em;
  width: 7em;
  border: .2em solid black;
  position: relative;
}

.element {
  text-align: center;
  margin-top: 1.5em;
}

abbr {
  font-size: 2em;
  font-weight: bold;
}

.edge span {
  position: absolute;
  padding: .4em;
}

.top    { top: 0; }
.bottom { bottom: 0; }
.right  { right: 0; }
.left   { left: 0; }