HTML Section with many elements - must stay together

Question

I need to display a section of text that contains something like this:

Also, 3 of these vertical lines of data need to be on the page. All independent from each other. I am having an awful time figuring out how to line everything up and keep the sections together if the size of the page changes. If CSS and HTML isn't the way to go, I'm OK with that. All ideas are appreciated.

Here is the CSS and HTML code that I have going.

    #leveltitle
    {
        font-size: 17.5px;
        margin: 0% 0% 0% 0%;
        font-weight: bold;
        text-align: center;
        width: 100%;
        border: 0.5px solid black;
    }
    #leveldisplay
    {
        font-size: 80px;
        line-height: 90%;
        margin: 0% 0% 5% 0%;
        font-weight: bold;
        text-align: center;
        width: 100%;
        border: 0.5px solid black;
    }
    #unitmarker
    {
        font-size: 30px;
        line-height: 90%;
        margin: 0% 0% 5% 0%;
        font-weight: bold;
        text-align: center;
        width: 100%;
        border: 0.5px solid black;
    }
    #displayindicator
    {
        font-size: 20px;
        line-height: 90%;
        font-weight: bold;
        border: 0.5px solid black;
        display: block;
        position: relative;
    }

    <h1 id="leveldisplay">100.0
      <span  id="unitmarker">%</span>
      <span>
        <sup id="displayindicator" style="color: red;">TOP</sup>
        <sub id="displayindicator" style="color: green;">BOTTOM</sub>
      </span>
    </h1>

...not sure why that image was such large – Caffeinated Nov 05 '15 at 20:35 — Caffeinated, Nov 05 '15 at 20:35

score 0 · Accepted Answer · answered Nov 05 '15 at 20:39

I made quite a few edits to your code, but here is the working example.

Essentially, to fix your problem and get the <sup> and <sub> next to the 100%, I floated the 100% over and made the <sup> and <sub> display:block.

And to have them "independent from one another", I compartmentalized them by wrapping each one in a <div> block.

HTML Section with many elements - must stay together

1 Answers1