CODEWITHSUNDEEP
htmlcss
Gavux
Gavux

Reputation: 23

CSS bring two different font sizes in one line

How do I both bring the "July" and the "2016" in the line, with the font-size differences and the "2016" being aligned right?

<div style="position: relative; width: 10%">
  <span style="font-size: 14px">July</span><span style="font-size: 20px; right: 0; position: absolute;">2016</span>
  <hr style="margin-top: 5px;">
</div>

Upvotes: 1

Views: 3348

Answers (2)

Rob Monhemius
Rob Monhemius

Reputation: 5144

remove: 

position: absolute;
top:0;

Replace it by:

float: right;

Fiddle

HTML

<div style="position: relative; width: 25%">
  <span style="font-size: 14px">July</span><span style="font-size: 20px;float:right;">2016</span>
  <hr style="margin-top: 5px;">
</div>

Upvotes: 0

will
will

Reputation: 2007

Do you mean they should be aligned the same way? You can use vertical-align: bottom to get them aligned on the line, or middle to align them centered with each other.

<div style="position: relative;display:inline-block;">
  <span style="font-size: 14px;display:inline-block;vertical-align:bottom;">July</span> <span style="font-size: 20px; display:inline-block;vertical-align:bottom;">2016</span>
  <hr style="margin-top: 5px;">
</div>

Upvotes: 1

Related Questions