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 }
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>