Alinear dos divs horizontalmente (uno en el extremo izquierdo y el otro en el extremo derecho del contenedor)

Solución:

• display:inline-block no creará un float problema, por lo que no es necesario agregar clearfix
• también puedes usar overflow:hidden en lugar de display:inline-block

.header {
  display: inline-block; 
  width: 100%;
  border: 1px solid red;
}
.playerOne {
  float: right;
}
.playerTwo {
  float: left;
}

<div class="header">
  <div class="playerOne">
    Oli
  </div>
  <div class="playerTwo">
    Matt
  </div>
</div>

hazlo simple con flex

.wrapper{
display: flex;
justify-content: space-between
}

<div class="wrapper"><span>1</span><span>2</span></div>

El problema es que no está apuntando al elemento de bloque en línea adecuado. 🙂

.header > div{
  display: inline-block;
}
.playerOne{
  float:right;
}

---

---

Utiliza Nuestro Buscador