How do I position this text with simultaneous, inline, superscript and subscript? - html

Question

I'm trying to make a status display with 3 numbers inline with other text like so:
-- a kind of flipped "Isotope notation".
I can do this with tables but a CSS approach is eluding me at the moment.
Ideally, I'd like to structure the HTML something like this (or simpler):
<p>
<div class="sharesblock">
<div class="shares">2535</div>
<div class="updwncontainer">
<div class="gains">2666</div>
<div class="losses">-13</div>
</div>
</div>
of
<span class="companyname">Super MegaCorp</span>
</p>
But I can't quite make it work. This almost does it:
div.sharesblock {
display: inline-block;
margin-right: 3ex;
position: relative;
}
div.updwncontainer {
position: absolute;
right: -2.8ex;
top: -0.3ex;
}
div.losses {
font-size: 1.1ex;
color: red;
}
div.gains {
font-size: 1.1ex;
color: green;
}
But that absolute positioning doesn't work well with variably-sized numbers. EG:
Here's the jsFiddle.
Update:
Oops. The above HTML does not validate. <p> elements are not allowed to have block-element children.
The production code replaces the p nodes with lis.
Tested and this does not affect the answers below, though. They work the same irregardless.
Here is the kind of testing I used to pick an answer.

Answer 1

Use relatives position and float
FIDDLE
html
<p>
<div class="sharesblock">
<div class="shares">25355</div>
<div class="updwncontainer">
<div class="gains">2666666</div>
<div class="losses">-139999</div>
</div>
</div>
of
<span class="companyname">Super MegaCorp</span>
</p>
css
div.sharesblock {
margin-right: 3ex;
position: relative;
clear:both;
}
div.sharesblock .shares{
float:left;
margin-right:.5ex;
}
div.updwncontainer {
position: relative;
float:left;
margin-right:.5ex;
}
div.losses {
font-size: 1.1ex;
color: red;
}
div.gains {
font-size: 1.1ex;
color: green;
}
span.companyname {
font-style: italic;
}

Answer 2

Demo Fiddle
Remove position absolute from .updwncontainer & use float:left property on .shares & .updwncontainer.
CSS
div.sharesblock {
margin-right: 3ex;
position: relative;
}
.shares {
float:left;
margin-right: 5px;
}
div.updwncontainer {
position: relative;
float: left;
margin-right: 5px;
}
div.losses {
font-size: 1.1ex;
color: red;
}
div.gains {
font-size: 1.1ex;
color: green;
}
span.companyname {
font-style: italic;
}

Answer 3

Is this what you are looking to achieve? (jsFiddle) Feel free to add the margins you want.
By the way, according to these guys, avoid div.className in CSS when not needed. Simply use .className instead.
Adjusted HTML:
<p>
<div class="sharesblock">
<div class="shares">2535</div>
<div class="updwncontainer">
<span class="gains">2666</span>
<br/>
<span class="losses">-13</span>
</div>
</div>
of
<span class="companyname">Super MegaCorp</span>
</p>
CSS:
.sharesblock {
display: inline-block;
vertical-align:middle;
}
.shares {
display:table-cell;
vertical-align:middle;
padding-right: 0.5ex; /* OP Added */
}
.updwncontainer {
display: table-cell;
vertical-align:middle;
line-height: 1ex; /* OP Corrected from px units */
padding-bottom: 0.5ex; /* OP Added to tweak alignment -- better than other solutions. */
}
.losses {
font-size: 1.1ex;
color: red;
}
.gains {
font-size: 1.1ex;
color: green;
}