Inversion of elements in CSS

Question

There are several messages concerning this subject, but I cannot solve this problem. As here:

How to reverse the order of elements in responsive mode

I don't understand why is the order of my elements changing? Why my elements to right are not Deposit then Paidout? As in the image below.

It is possible to solve this problem without flex?

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body {
    margin: 0;
    padding: 0;

}

.txt10 {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    color: red;
}

.header{
  display: inline-block;
  width: 100%;
  background-color: aqua;
  height: 20px;
  padding-top: 13px;
  padding-bottom: 13px;
}

.header-items-left{
  float: left;
  padding-left: 20px;
}

.left{
  margin-left: 150px; 
}


.header-items-right{
  float: right;
  padding-right: 10px; /*espacement entre les deux lignes à droite */

}

.right{
  margin-right: 50px; 
}

  <div class="header">
    <div class="left">
      <div class="header-items-left"><i class="far fa-calendar"></i>138 running days</div>
      <div class="header-items-left"><i class="far fa-envelope"></i>admin@superbtc.biz</div>
    </div>
    <div class="right">
      <div class="header-items-right"><i class="fas fa-angle-right"></i> deposit</div>
      <div class="header-items-right"><i class="fas fa-angle-right"></i> paidout</div> 
      
    </div>
  </div>

@Huangism, I think you misread the question, he asks if it can be solved without using flex. Just letting know. — Wesley Brian Lachenal, May 07 '21 at 19:32

score 2 · Accepted Answer · answered May 07 '21 at 19:21

Use float: right on the container instead and display: inline-block for the two items.

.right {
  float: right;
}

.text {
  display: inline-block;
  padding-left: 20px;
}

<div class='right'>
  <div class='text'>first</div>
  <div class='text'>second</div>
</div>

Inversion of elements in CSS

1 Answers1