Align two divs horizontally (one on extreme left and the other on extreme right of container)
display:inline-block
will not create afloat
issue so there is no need to add clearfix- you can also use
overflow:hidden
instead ofdisplay: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>
make it simple with flex
.wrapper{
display: flex;
justify-content: space-between
}
<div class="wrapper"><span>1</span><span>2</span></div>
The problem is that you are not targeting the proper inline-block element. :)
.header > div{
display: inline-block;
}
.playerOne{
float:right;
}