How can I get this image done in HTML and CSS? - html

Question

I have this image that is to be implemented in HTML and CSS.
This is what I have tried.
<span>$</span><span style="font-size: 50px;">99</span><span style="vertical-align: text-top;">00</span>
But this actually doesn't turn out like I want in the image.

Answer 1

For example:
.price {
font-size: 80px;
color: #f60;
}
.price sup {
font-size: 38px;
}
.price sub {
font-size: 28px;
color: #aaa;
position: absolute;
display: inline-block;
margin: 48px 0 0 -40px;
}
<span class="price"><sup>$</sup>99<sup>00</sup><sub>/month</sub></span>
http://jsfiddle.net/1zjuddj8

Answer 2

It sounds like the <sup> tag is your friend here. Any text in the <sup> tags will become superscript.
Example
<sup>$</sup>99<sup>00</sup>
Additional Documentation/Reference from w3.org: http://www.w3.org/TR/html-markup/sup.html

Answer 3

You have a specific tag for make your text appears on the top use <sup></sup> to treat it like an indice and <sub></sub> as a note. To force the alignement you will have to play with vertical-align value in px or in %.
`
<sup style="vertical-align: 10;">$</sup><sub style="font-size: 50px;vertical-align:-10">99</sub><sup style="vertical-align: 10;">00</sup>

Answer 4

You can use sup to make the text superscript and then set the position of the text using position: relative and top:
HTML:
<h1><sup>$</sup>99<sup>00</sup></h1>
CSS:
h1 { font-size: 50px; }
sup { font-size: 15px;
position: relative;
line-height: 0;
vertical-align: baseline;
top: -23px;
}
JS Fiddle

Answer 5

A solution which requires a bit more fine tuning, but has a lot of control, very useful for front-end layouts:
HTML code
<div class="price_tag">
<div class="price"><sup>$</sup><span class="bignum">99</span><sup>00</sup>
</div>
<div class="month">/month</div>
</div>
CSS code
.price_tag {
position:relative;
width:190px;
height:100px;
color:#f90;
font-size:6em;
font-family:helvetica, arial, sans-serif;
}
.price {
position:relative;
width:200px;
height:100px;
font-weight:bold;
}
sup {
position:relative;
font-size:2.5rem;
top:1rem
}
.month {
width:60px;
height:30px;
color:#ccc;
font-size:1rem;
right:0;
bottom:0;
z-index:3;
position:absolute;
}
fiddle here

Answer 6

To duplicate it with accuracy, your code will have to be more involved than that. I've tried to match it as closely as I could here: http://jsfiddle.net/wvcm92ka/
The code is below:
HTML:
<div class="amount">
<div class="amount-parts">
<div class="amount-currency">$</div>
<div class="amount-whole">99</div>
<div style="clear: left;"></div>
</div>
<div class="amount-parts">
<div class="amount-decimal">00</div>
<div class="amount-period">/month</div>
<div style="clear: left;"></div>
</div>
<div style="clear: left;"></div>
</div>
CSS:
.amount-parts{
font-family: verdana, sans-serif;
float: left;
}
.amount-currency, .amount-whole, .amount-decimal, .amount-period{
font-weight: 600;
}
.amount-currency, .amount-whole, .amount-decimal{
color: #ff0000;
}
.amount-currency{
float: left;
font-size: 32pt;
font-weight: bold;
margin-top: 5px;
}
.amount-whole{
font-size: 60pt;
float: left;
}
.amount-decimal{
color: #ff0000;
font-size: 24pt;
font-weight: bold;
margin-top: 15px;
}
.amount-period{
color: #999;
font-size: 10pt;
font-weight: bold;
}

Answer 7

Another solution:
body {
font-size: 20px;
}
.div-table {
display: table;
border-collapse: collapse;
}
.div-table .div-table-row {
display: table-row;
}
.div-table .div-table-cell {
display: table-cell;
text-align: left;
vertical-align: top;
}
.big-number {
font-size: 50px;
}
.padding-top {
padding-top: 5px;
}
<div class="div-table">
<div class="div-table-row">
<div class="div-table-cell padding-top">
$
</div>
<div class="div-table-cell">
<span class="big-number">99</span>
</div>
<div class="div-table-cell padding-top">
<div>00</div>
<div>/month</div>
</div>
</div>
</div>
http://jsfiddle.net/gbx0ogqm/