How to make two different font sizes sit on one line using Unsemantic
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 }
Answer
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