How to make two different font sizes sit on one line using Unsemantic

Question

Im new to both front end-dev and unsemantic. Im trying to get two different font sizes to sit on the same line. But conventional methods don't seem to work. I tried vertical-align: "bottom;" but that didn't cut it. This is what it currently looks like I'm sorry I couldnt use jsfiddle to show you, using unsemantics means it didn't show properly

 10 <body class="grid-container">
 11 <header>
 12
 13   <div class ="grid-100 align-center">
 14   <div class="grid-30">
 15     <div id="name"><a href="http//nadiavu.com">Nadia</a></div> 
 16   </div>
 17   <div class="grid-30">
 18     <div id="about"><a href="about">About</a></div>
 19   </div>
 20   <div class="grid-20 suffix-20">
 21    <div id="contactpage"><a href="contacpage">Contact</a></div>
 22 </div>
 23 </div>

And this is CSS

 27 #name{
 28      color: #A0909D;
 29      font-size: 2.2em ;
 30      font-family: Palatino;
 31      float: right;
 32  }
 33
 56 #about{
 57     font-family: Palatino;
 58     font-size: 1.2em;
 59     float: right;
 60
 61
 62 }
 63
 64 #contactpage{
 65       font-family: Palatino;
 66       font-size: 1.2em;
 67       float: right;
 68
 69  }

Josh Powell · Answer 1 · 2014-02-22T01:58:59.077

You can just allow the text to behave as normal inline styles like so, Demo.

Here is the css:

.big {
    font-size: 20px;
}

.small {
    font-size: 10px;
}

The problem is being caused by floating them.

Or you can do something like this,

css:

.parent {
    vertical-align: bottom;
}

.parent span {
    display: inline-block;
    width: 200px;
    height: 50px;
}

.big {
    font-size: 20px;
}

.small {
    font-size: 10px;
}

Finally, a fiddle: Demo

OR!! You can go about this option,

css:

.parent {
    display: table;
    vertical-align: bottom;
    width: 100%;
}

.parent span {
    display: table-cell;
    width: 33%;
    height: 50px;
}

.big {
    font-size: 20px;
}

.small {
    font-size: 10px;
}

Yet another fiddle, Demo

Thank you for that. Unfortunately adding any widths manually doesn't work so well with the grid system. But thank you for your time. I decided to do line-height to get them sitting on the same line.:) — nadia, Feb 23 '14 at 12:51

score 1 · Accepted Answer · answered Feb 22 '14 at 02:00

vertical-align is not created for this. Use instead the line-height property:

<!DOCTYPE html>
<html>
<head>
<style>
body {font-size: 16px;}
p {float: left; margin: 5px; }
p.big {font-size: 200%; line-height:35%;}
</style>
</head>

<body>
<p>
This
</p>

<p class="big">
This
</p>

<p>
This
</p>

</body>
</html>

score 0 · Answer 3 · answered Oct 28 '17 at 15:32

0

<P style="color: white;font-size: 2.2em" class="w3-center"><span style="font-
size: 1.2em">Nadia</span>About<span style="font-size: 1.2em">Contact</span>
</P>

this is how you can get the different sized text on the same row

answered Oct 28 '17 at 15:32

sase mohan

11
3

How to make two different font sizes sit on one line using Unsemantic

3 Answers3