float right element inverted - html

Question

In my header I have 4 elements which are:
"Running Days" - "admin#email.com" - "Deposit" - "Paidout".
My 4 elements are separated into 2.
"Deposit" and "Paidout" are in right in my header.
I made a float:right!
Except that the order is inverted namely I have "Paidout" before "Deposit".
header {
width: 100%;
height: 38px;
background-color: #CEECE8;
}
.subtitles {
font-size: 13px;
font-family: 'Roboto Slab', serif;
padding-top: 8px;
padding-left: 80px;
padding-right: 80px;
text-transform: uppercase;
}
.subtile-left {
display: inline-block;
padding-left: 18px;
}
.subtile-right {
display: inline-block;
padding-left: 18px;
float: right;
}
<header>
<div class="subtitles">
<div class="subtile-left"><i class="far fa-calendar"></i> 137 Running Days </div>
<div class="subtile-left"><i class="far fa-envelope"></i> Admin#superbtc.biz </div>
<div class="subtile-right"><i class="fas fa-caret-right"></i> Deposit </div>
<div class="subtile-right"><i class="fas fa-caret-right"></i> Paidout </div>
</div>
</header>

Answer 1

Use float:left with the left elements instead and adjust text-align to align the other to the right:
header {
width: 100%;
height: 38px;
background-color: #CEECE8;
}
.subtitles {
font-size: 13px;
font-family: 'Roboto Slab', serif;
padding-top: 8px;
padding-left: 80px;
padding-right: 80px;
text-transform: uppercase;
text-align:right;
}
.subtile-left {
display: inline-block;
padding-left: 18px;
float: left;
}
.subtile-right {
display: inline-block;
padding-left: 18px;
}
<header>
<div class="subtitles">
<div class="subtile-left"><i class="far fa-calendar"></i> 137 Running Days </div>
<div class="subtile-left"><i class="far fa-envelope"></i> Admin#superbtc.biz </div>
<div class="subtile-right"><i class="fas fa-caret-right"></i> Deposit </div>
<div class="subtile-right"><i class="fas fa-caret-right"></i> Paidout </div>
</div>
</header>
A better way would be to consider flexbox to avoid having the whitespace issue between inline-block elements:
header {
width: 100%;
height: 38px;
background-color: #CEECE8;
}
.subtitles {
font-size: 13px;
font-family: 'Roboto Slab', serif;
padding-top: 8px;
padding-left: 80px;
padding-right: 80px;
text-transform: uppercase;
display:flex;
}
.subtitles :nth-child(2) {
margin-right:auto;
}
.subtile-left {
padding-left: 18px;
}
.subtile-right {
padding-left: 18px;
}
<header>
<div class="subtitles">
<div class="subtile-left"><i class="far fa-calendar"></i> 137 Running Days </div>
<div class="subtile-left"><i class="far fa-envelope"></i> Admin#superbtc.biz </div>
<div class="subtile-right"><i class="fas fa-caret-right"></i> Deposit </div>
<div class="subtile-right"><i class="fas fa-caret-right"></i> Paidout </div>
</div>
</header>

Answer 2

Elements are floated in order of source appearance.
Check this example:
.container {
background-color: #ddd;
}
.container::after { /* clearfix */
display: block;
content: "";
clear: both;
}
[id] {
background-color: #f0f0f0;
border: 3px dotted #999;
text-align: center;
width: 2em;
}
#a {
float: right;
}
<div class="container">
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
</div>
div#a floats right, which means it is moved as far to the right of its container as possible.
Now let's make div#b float to the right as well:
.container {
background-color: #ddd;
}
.container::after { /* clearfix */
display: block;
content: "";
clear: both;
}
[id] {
background-color: #f0f0f0;
border: 3px dotted #999;
text-align: center;
width: 2em;
}
#a,
#b {
float: right;
}
<div class="container">
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
</div>
Now when the layout engine parses the layout, the first element that is floated is div#a (because it comes before div#b in the source), moving it to the very right side of div.container.
Next comes div#b, which is now also floated to the right. Since div#a is already taking space at the right side of div.container, div#b can only float until its right border touches the left border of div#a.
This obviously makes it so visual appearance of div#a and div#b is inverted compared to source order.

Answer 3

When the viewport is rendering the HTML it reads the elements from top bottom.
This means the following:
1) 'Deposit' is seen before 'Paidout' and thus is floated to the right part of the container div first
2) Paidout is seen and floats to the right, but bumps into deposit and thus finds its place to the left of it