How to achieve absolute text position in html css whilst considering scaling? - html

Question

I have been trying to solve this problem where I want the text "Sample" and then I want texts "bla1" and "bla2" to the right of text "Sample". I also want them to stay together when someone scales up and down their browser. So 100% and 200% zoom on any browser should not change the relative positioning of the texts. Any help is much appreciated! If javascript can solve the problem, I'll use javascript.
This photo explains what I want
See the code here: https://codepen.io/anon/pen/KZBzmY#anon-login
HTML:
<div id="tophead">
<a href="index.html">
<h1 class="webHeader">Sample</h1>
<h1 class="webHeader2">bla1</h1>
<h1 class="webHeader3">bla2</h1>
</a>
</div>
CSS:
#tophead {
margin: 0px;
padding: 0px;
border: 2px solid black;
position: absolute;
left: 40%;
font-family: Arial;
color: #00284d;
}
#tophead h1 {
margin: -2px;
}
#tophead a:link {
text-decoration: none;
color: #00284d;
}
.webHeader {
top: -50%;
left: -20%;
font-size: 180%;
position: relative;
}
.webHeader2 {
text-align: right;
font-size: 100%;
position: relative;
}
.webHeader3 {
text-align: right;
font-size: 90%;
position: relative;
}

Answer 1

I will suggest you to wrap the bla1 and bla2 text in <h2> and then use display: inline-block. No need to use position: absolute
Updated Codepen
#tophead {
margin: 0px;
padding: 0px;
font-family: Arial;
color: #00284d;
text-align: center;
}
#tophead h1 {
margin: 0;
display: inline-block;
vertical-align: middle;
}
#tophead a:link {
text-decoration: none;
color: #00284d;
display: inline-block;
border: 2px solid #000;
}
.webHeader2 {
display: inline-block;
margin: 0;
vertical-align: middle;
margin-left: 20px;
}
.webHeader2 span {
display: block;
}
.small {
font-size: 90%;
}
<div id="tophead">
<a href="index.html">
<h1 class="webHeader">Sample</h1>
<h2 class="webHeader2">
<span>bla1</span>
<span class="small">bla2</span>
</h2>
</a>
</div>